Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | Canvas Draw Bezier Curve

  • Last Updated : 27 Feb, 2019

Curves on HTML canvas can be drawn using arcs, but drawing a complex diagram using arcs is quite a tedious task. In the given circumstance, Bezier curve will be very useful in providing more flexibility in drawing curves. Bezier curves on HTML canvas are drawn using a start point, one or more control point/points and an endpoint. Example: In the case of drawing a landscape, real-world objects, irregular shapes etc.
Bezier Curves can be drawn in two ways:

  • Quadratic Bezier Curve
  • Cubic Bezier Curve

Quadratic Bezier Curve: This curve is controlled by one control point.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Syntax:

moveTo(start_pnt_X, start_pnt_Y);
context.quadraticCurveTo(cntrl_pnt_X, cntrl_pnt_Y, end_pnt_X, end_pnt_y);

Example: This example create a curve using quadratic bezier curve.






<!DOCTYPE html> 
<html>
  
<head>
    <title>
        Quadratic Bezier Curve
    </title>
</head>
  
<body
    <h1>Quadratic Bezier Curve</h1>
      
    <canvas id="CanvasOfGeeks" width="400" height="200" 
            style="border:solid 4px green"
      
    <script
        var c = document.getElementById("CanvasOfGeeks");
        var context = c.getContext("2d");
          
        var start_pnt_X = 50;
        var start_pnt_Y = 150;
        var cntrl_pnt_X = 200;
        var cntrl_pnt_Y = 30;
        var end_pnt_X = 350;
        var end_pnt_Y = 150;
          
        /* Start new path */
        context.beginPath();
        context.lineWidth=3; 
        context.strokeText( ".", cntrl_pnt_X, cntrl_pnt_Y);
          
        /* Starting point of the curve */
        context.moveTo(start_pnt_X, start_pnt_Y); 
          
        context.quadraticCurveTo(cntrl_pnt_X, 
                    cntrl_pnt_Y, end_pnt_X, end_pnt_Y);
                      
        /* drawing line on the canvas */
        context.stroke();
    </script
</body
  
</html>                    

Output:

Explanation:

  • Pre-requisite: HTML Canvas Basics
  • First Line: Reference for canvas object is stored in variable ‘c’ using DOM concept.
    Second Line: Without having drawing context of canvas nothing can be drawn on it.
    var c = document.getElementById("CanvasOfGeeks"); 
           var context = c.getContext("2d");
    
  • One can change the width of line by overriding the value of “lineWidth” attribute of context object.
    context.lineWidth=3;
  • For putting a dot over the coordinate of control point.You can see the dot in the figure shown above.
    context.strokeText( ".", cntrl_pnt_X, cntrl_pnt_Y);
  • This function is used to draw a curve from the start point mentioned in function.
    context.quadraticCurveTo(cntrl_pnt_X, cntrl_pnt_Y, end_pnt_X, end_pnt_Y);
  • This function is used to move the context.
    context.moveTo(start_pnt_X, start_pnt_Y);

Note: Please keep the control point within the canvas boundary.

Cubic Bezier Curve: This curve is controlled by two control points.

Syntax:

moveTo(start_pnt_X, start_pnt_Y);
contex.bezierCurveTo(cntrl_pnt_1_X, cntrl_pnt_1_Y, cntrl_pnt_2_X,
                      cntrl_pnt_2_Y, end_pnt_X, end_pnt_y);

Example: This example create a curve using cubic bezier curve.




<!DOCTYPE html> 
<html>
       
<head>
    <title>
        Cubic Bezier Curve
    </title>
</head>
  
<body
    <h1>Cubic Bezier Curve</h1>
      
    <canvas id="CanvasOfGeeks" width="400" height="200" 
            style="border:solid 4px green"
      
    <script
        var c = document.getElementById("CanvasOfGeeks"); 
        var context = c.getContext("2d");
          
        var start_pnt_X = 50;
        var start_pnt_Y = 100;
        var cntrl_pnt_1_X = 150;
        var cntrl_pnt_1_Y = 30;
        var cntrl_pnt_2_X = 250;
        var cntrl_pnt_2_Y = 170;
        var end_pnt_X     = 350;
        var end_pnt_Y     = 150;
          
        /* Start a new Path */
        context.beginPath();     
        context.lineWidth=3;
          
        /* Representing first control point */
        context.strokeText( ".", cntrl_pnt_1_X, cntrl_pnt_1_Y); 
          
        /* Representing second control point */
        context.strokeText( ".", cntrl_pnt_2_X, cntrl_pnt_2_Y); 
          
        /* Starting point of the curve */
        context.moveTo(start_pnt_X, start_pnt_Y); 
        context.bezierCurveTo(cntrl_pnt_1_X, cntrl_pnt_1_Y, 
            cntrl_pnt_2_X, cntrl_pnt_2_Y, end_pnt_X, end_pnt_Y);
          
        /* Drawing line on the canvas  */
        context.stroke(); 
    </script
</body
  
</html>                    

Output:

Example: This example draw a fish using Bezier Curve.
Input:




<!DOCTYPE html>
<html
  
<head>
    <title>
        Drawing a fish using Bezier Curve
    </title>
</head>
  
<body
    <canvas id="CanvasOfGeeks" width="400" height="200" 
            style="border:solid 4px green"
      
    <script
        var c = document.getElementById("CanvasOfGeeks"); 
        var context = c.getContext("2d");
          
        /* Start a new Path */
        context.beginPath();
        context.lineWidth=3;
              
        /* Upper curve of the fish, from mouth to tail */
        context.moveTo(60, 120);
        context.bezierCurveTo(90, 30, 200, 130, 310, 55);
              
        /* Lower curve of the fish, from mouth to tail */
        context.moveTo(60, 120);
        context.bezierCurveTo(90, 170, 200, 110, 310, 160);
              
        /* Upper half of tail */
        context.moveTo(310, 55);
        context.quadraticCurveTo(320, 80, 280, 110);
              
        /* lower half of tail */
        context.moveTo(310, 160);
        context.quadraticCurveTo(320, 120, 280, 110);
              
        /* Eye of the fish */
        context.moveTo(100, 100);
        context.arc(100, 100, 5, 0, 2*Math.PI);
              
        /* Mouth of the fish */
        context.moveTo(60, 120);
        context.lineTo(80, 120);
        context.stroke();
    </script
</body
  
</html>                    

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :