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.
var variableName = canvas.getContext(2d);
variableName.lineTo(x,y);
You can set width of a line drawn by stroke function using lineWidth property of 2d context.
var variableName = canvas.getContext(2d);
variableName.lineWidth = value;
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.
var variableName = canvas.getContext(2d);
variableName.strokeRect(x,y,width,height);
The butt value is used to make line's end flat and orthogonal.
The butt value is used to make line's end flat and orthogonal.
var variableName = canvas.getContext(2d);
variableName.lineCap="butt";
The round value is used to make line's end rounded.
var variableName = canvas.getContext(2d);
variableName.lineCap="round";
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.
var variableName = canvas.getContext(2d);
variableName.lineCap="square";
You can make any shape using lines such as arrow, square, polygon etc.
Don't forget first you have to beign path then draw some drawings and finally close path.
Open notepad or any other text editor, follow the following points.
save file with name task.html or task.htm and then open it using any browser and see results.