Capt. Horatio T.P. Webb

HTML 5 -- CANVAS EXAMPLE #1 -- LINES

Parks -- Fall 2013

Lines

Methods:
name_for_the_canvas_context.beginPath();	States that you are going to start a line drawing with one or more subpaths
name_for_the_canvas_context.moveTo(x,y);	Move to the starting position. x is pixels from the left of the canvas y = pixels from the top of the canvas
name_for_the_canvas_context.lineTo(x,y);	Move to the ending position. x is pixels from the left of the canvas y = pixels from the top of the canvas
name_for_the_canvas_context.stroke();	Draw the line
name_for_the_canvas_context.strokeStyle="value";	value is a color
name_for_the_canvas_context.fill();	Fill the sub paths with color
name_for_the_canvas_context.closePath();	End the line drawing
Line Properties:
name_for_the_canvas_context.LineWidth = value;	width of the line in pixels
name_for_the_canvas_context.lineCap = "value";	How to terminate a line. Values are: butt, round OR square
name_for_the_canvas_context.lineJoin = "value";	How to bevel the line intersections. Values are: bevel, round OR miter
name_for_the_canvas_context.miterLimit = "value";

<canvas id="line_example" width="500" height="300""></canvas>

Here is the code:

 var lex = document.getElementById("line_example");
 var lexc = lex.getContext("2d");
 var lcap = ["butt","round","square"];
 var ljoin = ["bevel","round","miter"]
 lexc.font="Italic 20px Sans-Serif";
 for (i=0;i<3;i++)
    {
     lexc.fillText("cap="+lcap[i],(i+1)*150-90,260);
     lexc.fillText("join="+ljoin[i],(i+1)*150-90,280);
    }
 for (i=0;i<3;i++)
       {
        lexc.lineCap=lcap[i%3];
        lexc.lineJoin=ljoin[i%3];
        lexc.lineWidth = 15+6*i;
        lexc.beginPath();
        topbot_x = (i+1)*150-50;
        mid_x    = topbot_x-80
        lexc.moveTo(topbot_x,25);
        lexc.lineTo(mid_x,125);
        lexc.lineTo(topbot_x,225);
        lexc.stroke();
        lexc.closePath();
   }