HTML5 Canvas Lines

Test Your Skill

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

View all questions...

HTML5 Canvas Lines

Overview

Canvas support drawing path with it two methods moveTo(x,y) ,lineTo(x,y) and stroke().

moveTo(x,y) move the start point to (x1,y1) co-ordinate on the screen. While lineTo(x2,y2) draws the line from start point(x1,y1) to end point (x2,y2) and stroke method fills the ink to the line.

moveTo(x1,x2)._________________________________________.lineTo(x,y)

<html>

<body>

Sorry! your browser does not support Canvas.

</canvas>

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

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

cxt.moveTo(5, 5);

cxt.lineTo(400, 300);

cxt.stroke();

</script>

</body>

</html>

Try it yourself

Important methods associated with canvas Line

Method	Description
beginPath()	beginPath method reset the current path.
moveTo(x,y)	moveTo move the point to x,y co-ordinate on the Canvas.
lineTo(x,y)	lineTo draw the line starting from start point defined by moveTo(x,y) method to end point specified as two parameters of lineTo method.
closePath()	This method mark the close of current subpath and starts a new sab path.
Fill()	This method fills the path with current fill style.
Stroke()	This method strokes the path with current stroke style.

Important property associated with canvas line

Property	Description
lineWidth	Gets or sets the width of line.
lineCap	Gets or sets the current cap style of line. The possible line cap values are butt, rounded and square.
lineJoin	Gets or sets the line join style. The possible line join style are bevel, round and miter.
miterLimit	Gets or sets the current miter limit ratio.

Line Color

cxt.strokeStyle = value is used to set the color of line in canvas.

<html>

<body>

Sorry! your browser does not support Canvas.

</canvas>

window.onload = function () {

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

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

cxt.moveTo(5, 5);

cxt.lineTo(400, 300);

cxt.strokeStyle = "#0000ff";

cxt.stroke();

}

</script>

</body>

Try it yourself

Line Width

cxt.lineWidth = value is used to set the with of a given line in canvas.

<html>

<body>

Sorry! your browser does not support Canvas.

</canvas>

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

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

cxt.lineWidth = 12;

cxt.moveTo(5, 5);

cxt.lineTo(400, 300);

cxt.strokeStyle = "#0000ff";

cxt.stroke();

</script>

</body>

Try it yourself

Line Cap

cxt.lineCap = value is used to set the line cap style

<html>

<body>

window.onload = function () {

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

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

c.lineWidth = 20;

c.moveTo(100, 150);

c.lineTo(450, 50);

c.strokeStyle = "#0000ff";

c.lineCap = "round";

c.stroke();

}

</script>

</body>

</html>

Try it yourself

<< Previous

Next >>

Comments

FideliaPosted on: 1/1/2012 12:02:26 PM

Haha.. I woke up down today. You have cheered me up.

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