Canvas Element<canvas>

Drawing an arc is very easy. We just need a centre, radius, starting and ending angle. Lets see how to decide starting and ending angle for an arc.

Clearly, the arc shown by shaded region is what we wanna draw. So, to begin with , we need a starting and an ending angle. Starting and ending angle are represented by a and b respectively. We need to provide angles in radian to the getarc() function. Angles value are shown at the starting point of four quadrant. The last argument decides direction of arc path between the two end points. Its optional and its default value is false(meaning clockwise).

Your browser does not support the canvas element.

Your browser does not support the canvas element.

Lets move to another type of curve that can be drawn on canvas. Its a parabolic curve.We use quadraticCurveTo() method to draw such a curve. It is defined by context point, control point and an ending point. These three points decides the shape of the curvature. If central point is closer to the other two points, the curve is very smooth.

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.

Your browser does not support the canvas element.
window.onload = function(){
	var canvas1 = document.getElementById("myCanvas1");
    var context1 = canvas1.getContext("2d");
    context1.moveTo(110, 250);
    var controlX = 50;
    var controlY = 0;
    var endX = 188;
    var endY = 250;
    context1.quadraticCurveTo(controlX, controlY, endX, endY);
    context1.lineWidth = 10;
    context1.strokeStyle = "orange"; 

Bezier curve can also be made using javascript in our canvas field. This is similar to the quadratic curve, except that it has two controlling points. Hence, more complex structures can be made using Bezier curve.

Your browser does not support the canvas element.
var canvas2 = document.getElementById("myCanvas2");
    var context2 = canvas2.getContext("2d");
    context2.moveTo(110, 250);
    var controlX1 = 50;
    var controlY1 = 10;
    var controlX2 = 88;
    var controlY2 = 10;
    var endX = 288;
    var endY = 200;
    context2.bezierCurveTo(controlX1, controlY1, controlX2,controlY2, endX, endY);
    context2.lineWidth = 10;
    context2.strokeStyle = "orange"; // line color

Lets see some gradient action using HTML5.

Member Login

Member Login

Not a Member? Sign Up!

Login to comment

Be the first to comment on this topic


<<< Wanna review

Continue >>>