HTML5 Canvas Arcs

Test Your Skill

Q. Which of the following input type was not introduced with HTML5.
URLSearchmultipleEmail

View all questions...

HTML5 Canvas Arcs

Canvas provide the facility to draw arc. If you can draw no need to say you can draw a circle, no need to say circle is made out of arc(learnt in school days).

Method	Description
arc(x,y,r,a1,a2,bool)	This method is use to draw an arc with center at x,y and radius r. With start angle as a1 and end angle as a2. The bool variable if false, arc is drawn in anticlockwise, else clockwise(by default it is clockwise)
bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)	The (x,y) is the end point of the curve. (cpx1, cpy1) are the coordinates of first control point while (cpx2,cpy2) are the second control point.
quadraticCurveTo(cpx,cpy,x,y)	This methods is used to draw quadratic curve. Quadratic curve is define by context point, control point and end point. Context point is defined by the moveTo(x,y) method. while (cpx, cpy) represent the control point and (x,y) represent the end point of the curve.

<html>

<body>

Sorry! your browser does not support Canvas.

</canvas>

window.onload = function () {

var c = document.getElementById("myCanvas");

var cxt = c.getContext("2d");

cxt.beginPath();

cxt.arc(200, 150, 50, 0, Math.PI * 2, true);

cxt.closePath();

cxt.strokeStyle = "#000";

cxt.stroke();

cxt.fillStyle = "Red";

cxt.fill();

}

</script>

</body>

</html>

Try it yourself

In the above sample the method arc is creating an arc with its centre at (200,150) radius equal to 50 and span a angle starting from 0 to 360.(Math.PI = 180)

For drawing a curve of any shape, there is another method bezireCurveTo(cpx1,cpy1,cpx2,cpy2,x,y). This method take three points to create a curve.

(cpx1, cpy1): It represent the first control point of the curve.

(cpx2, cpy2): It represent the second control point of the curve.

(x, y): It represent the end point of the curve.

<html>

<body>

Sorry! your browser does not support Canvas.

</canvas>

window.onload = function () {

var c = document.getElementById("cavId");

var cxt = c.getContext("2d");

cxt.beginPath();

cxt.bezierCurveTo(100, 70, 150, 30, 200, 70);

cxt.bezierCurveTo(200, 70, 250, 110, 300, 70);

cxt.fillStyle = "#00ff00";

cxt.fill();

}

</script>

</body>

</html>

Try it yourself

For drawing quadratic curves quadraticCurveTo(cpx,cpy,x,y) method. Complete quadratic curve is defined by context point, control point and the end point. The control point define the curvature of quadratic curve. This point can be considered as the meeting point of the two tangents drawn from control point and end point. The context point of the quadratic curve is defined by the moveTo(x,y) method.

<html>

<body>

Sorry! your browser does not support Canvas.

</canvas>

window.onload = function () {

var c = document.getElementById("cavId");

var cxt = c.getContext("2d");

cxt.beginPath();

cxt.moveTo(100, 150)

cxt.quadraticCurveTo(200, 10, 300, 150);

cxt.lineWidth = 12;

cxt.strokeStyle = "Blue";

cxt.stroke();

cxt.closePath();

}

</script>

</body>

</html>

Try it yourself

In the above example (200,10) is control point while (100,150) and (300,150) are context point and end point respectively.

<< Previous

Next >>

Add Comment

Comment

Name
(Required)

E-mail (Privacy assured)
(Required)

Subscribe to this site by email

Test Your Skill

Add Comment

Poll of the Day

Related Contents

Online Test Papers

Related Tutorials

Fun @ Work

Top Blogs