Tag Archives: Draw Line in Canvas HTML5

Draw Line in Canvas HTML5.

Write the javascript part in the head section of the html page.

    function Draw_Line(Canvas, Left_Position, Top_Position, Width, Height, Line_Color, LINE_WIDTH) {
        var Context2d = Canvas.getContext('2d');
        Context2d.moveTo(Left_Position, Top_Position);
        Context2d.lineTo(Width, Height);
        Context2d.lineWidth = LINE_WIDTH;
        // set line color
        Context2d.strokeStyle = Line_Color;

Write the html part in the body section of the html page.

 <canvas id='myCanvas' width='500' height='500'></canvas>
 <script>Draw_Line(myCanvas, 200, 20, 20, 20, '#000000', 5);</script>

HTML5 Canvas Line

HTML5 Canvas Line