Previous Next

Canvas Line

Lines are created by using canvas lineTo() method, lines drawn by lineTo() method are straight lines having co-ordinates (x,y) such as lineTo(x,y). This method draws line from an initial position to final or secified position. Specified position is defined by x and y co-ordinates, these x and y co-ordinates are called line's end points, where line ends and initial or starting point is where line starts and it can be changed by moveTo(x,y) method.

Syntax

var variableName = canvas.getContext(2d);
variableName.lineTo(x,y);

LineWidth

You can set width of a line drawn by stroke function using lineWidth property of 2d context.

Syntax

var variableName = canvas.getContext(2d);
variableName.lineWidth = value;

LineCap

LineCap property is used to set the cap of lines, this property makes line's end either round or square shape. It takes the following values.

Syntax

var variableName = canvas.getContext(2d);
variableName.strokeRect(x,y,width,height);

• butt
• round
• square

The butt value is used to make line's end flat and orthogonal.

Butt Value

The butt value is used to make line's end flat and orthogonal.

Syntax

var variableName = canvas.getContext(2d);
variableName.lineCap="butt";

Round Value

The round value is used to make line's end rounded.

Syntax

var variableName = canvas.getContext(2d);
variableName.lineCap="round";

Square Value

The square value is used to make line's end rectangle. It draws a rectangle at the end of line with the size of width x line width /2. The rectangle drawn at the end of line is an extra rectangle which makes line little longer than other lines.

Syntax

var variableName = canvas.getContext(2d);
variableName.lineCap="square";

Line Shapes

You can make any shape using lines such as arrow, square, polygon etc.

Practice Task

Open notepad or any other text editor, follow the following points.

• Use <canvas> element to draw canvas on webpage
• Assign id <square> to canvas element
• Give width and height of 250 250 respectivelly
• Use inline style to style canvas element
• Give border and to canvas using css styles
• Border should be 5px solid orange
• Use javascript to draw square using lines

save file with name task.html or task.htm and then open it using any browser and see results.

Previous Next