HTML5 Canvas Curves

Drawing canvas curves

Drawing curves is a little more involved because you have more parameters to consider. The following Table lists the methods used when working with curves:

Method Description
arc A standard arc based on a starting and ending angle and a defined radius
quadradicCurveTo A more complex arc that allows you to control the steepness of the curve
bezierCurveTo Another complex arc that you can skew

You can control the lineWidth, strokeStyle, and lineCap properties to change how your curves by creating some basic arcs on your canvas.

The arc method

The following code sample draws four arcs: a full circle followed by three quarter circles, each with a different style. The math formulas are specified in the parameters to the arc to get the value in radians for startAngle and endAngle parameters. 

<script type="text/javascript">
    var drawingCurves = function () {
        var drawingSurface = document.getElementById("drawingSurface");
        var ctxt = drawingSurface.getContext("2d");
        ctxt.beginPath();
        ctxt.arc(150, 100, 75, 0, 2 * Math.PI, false);
        ctxt.lineWidth = 25;
        ctxt.strokeStyle = '#0f0';
        ctxt.stroke();
        ctxt.beginPath();
        ctxt.arc(450, 100, 75, 1.5 * Math.PI, 2 * Math.PI, false);
        ctxt.lineWidth = 25;
        ctxt.strokeStyle = 'blue';
        ctxt.stroke();
        ctxt.beginPath();
        ctxt.arc(150, 300, 75, 1 * Math.PI, 1.5 * Math.PI, false);
        ctxt.lineWidth = 25;
        ctxt.strokeStyle = '#0ff';
        ctxt.stroke();
        ctxt.beginPath();
        ctxt.arc(450, 300, 75, .5 * Math.PI, 1 * Math.PI, false);
        ctxt.lineWidth = 25;
        ctxt.strokeStyle = '#f00';
        ctxt.stroke();
  }
</script>

The quadraticCurveTo method

The quadraticCurveTo method allows you to change the distance from the center point along the curve.

Drawing a quadratic curve is somewhat like drawing a straight line but then pinching it in the middle and pulling it away to create a curve where the starting and ending points of the line stay fixed.

The following Table listed the parameters required for the quadraticCurveTo method:

Parameter Description
controlX, controlY These parameters define the control point, relative to the top left of the canvas, that is used to “stretch” the curve away from the line formed by the start and end points.
endX, endY This is the point where the curve should end.

As the control point moves farther away from the line formed by the start and end points, the following code creates a steeper curve: 

<script type="text/javascript">
    var quadraticCurve = function () {
        var drawingSurface = document.getElementById("drawingSurface");
        var ctxt = drawingSurface.getContext("2d");
        ctxt.beginPath();
        ctxt.moveTo(10, 380);
        ctxt.quadraticCurveTo(300, -250, 580, 380);
        ctxt.lineWidth = 25;
        ctxt.strokeStyle = '#f00';
        ctxt.stroke();
    }
</script>

This example used a negative number to indicate that the control point should be above the top of the canvas to stretch the curve.

The beizerCurveTo method

A Bezier curve is similar to the quadratic curve except that it has two control points instead of just one. Having two points allows the Bezier curve to create more complex curves.

You need to pass three sets of coordinates to the bezierCurveTo method, as listed in Table below:

Parameter Description
controlX, controlY The first two parameters specify the first control point that is used to stretch out the curve.
Control2X, control2Y The second two parameters specify the second control point that is used to stretch out the curve.
endX, endY The final two parameters specify the end point for the curve.

The following code creates a Beizer curve with two control points instead of just one using control2x and control2y.

<script type="text/javascript">
    var beizerCurve = function () {
        var drawingSurface = document.getElementById("drawingSurface");
        var ctxt = drawingSurface.getContext("2d");
        ctxt.beginPath();
        ctxt.moveTo(125, 20);
        ctxt.bezierCurveTo(0, 200, 300, 300, 50, 400);
        ctxt.lineWidth = 5;
        ctxt.strokeStyle = '#f00';
        ctxt.stroke();
    }
</script>

Ads Right