HTML5 Canvas Tutorial - HTML5 Canvas Curve

HTML5 Canvas Quadratic Curve

To create a quadratic curve with HTML5 Canvas, we can use the quadraticCurveTo() method.

Quadratic curves are defined by the context point, a control point, and an ending point.

Quadratic curves can be styled with the lineWidth, strokeStyle, and lineCap properties.

A control point defines the curvature of the quadratic curve by creating two imaginary tangential lines which are connected to the context point and the ending point.

The context point is defined by the moveTo() method. Moving the control point further away from the context point and the ending point will create sharper curves.

Moving the control point closer to the context point and the ending point will create broader curves.

Example


<!DOCTYPE HTML>
<html>
  <body>
    <canvas id="myCanvas" width="500" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
<!-- w  w w .  ja v a2 s. co m-->
      context.beginPath();
      context.moveTo(150, 150);
      context.quadraticCurveTo(150, 0, 300, 150);
      context.lineWidth = 10;

      // line color
      context.strokeStyle = 'black';
      context.stroke();
    </script>
  </body>
</html>

The code above is rendered as follows:

HTML5 Canvas Bezier Curve

To create a Bezier curve with HTML5 Canvas, we can use the bezierCurveTo() method.

Bezier curves are defined with the context point, two control points, and an ending point.

Two control points allow us to create more complex curvatures.

Bezier curves can be styled with the lineWidth, strokeStyle, and lineCap properties.

The first part of the curve is tangential to the imaginary line that is defined by the context point and the first control point.

The second part of the curve is tangential to the imaginary line that is defined by the second control point and the ending point.

Example 2


<!DOCTYPE HTML>
<html>
  <body>
    <canvas id="myCanvas" width="500" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
<!--from  w  w w  .  jav  a  2  s.  c  o  m-->
      context.beginPath();
      context.moveTo(110, 130);
      context.bezierCurveTo(140, 10, 300, 10, 100, 170);
      context.lineWidth = 10;

      // line color
      context.strokeStyle = 'red';
      context.stroke();
    </script>
  </body>
</html>

The code above is rendered as follows:

Example 3

We can use path to create a custom shape with HTML5 Canvas.

The path is closed using the closePath() method.

We can use the lineTo(), arcTo(), quadraticCurveTo(), or bezierCurveTo() methods to construct each subpath which makes up our shape.


<!DOCTYPE HTML>
<html>
  <body>
    <canvas id="myCanvas" width="500" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
<!-- w ww .  j av a  2 s .c  o m-->
      // begin custom shape
      context.beginPath();
      context.moveTo(170, 80);
      context.bezierCurveTo(130, 100, 130, 150, 230, 150);
      context.bezierCurveTo(250, 180, 320, 180, 340, 150);
      context.bezierCurveTo(420, 150, 420, 120, 390, 100);
      context.bezierCurveTo(430, 40, 370, 30, 340, 50);
      context.bezierCurveTo(320, 5, 250, 20, 250, 50);
      context.bezierCurveTo(200, 5, 150, 20, 170, 80);

      // complete custom shape
      context.closePath();
      context.lineWidth = 5;
      context.strokeStyle = 'blue';
      context.stroke();
    </script>
  </body>
</html>

The code above is rendered as follows: