---

Search posts under HTML5:

---

Canvas line in HTML5

How to draw lines on the Canvas in HTML5?

To know the basics of Canvas and how it work, click here.

To draw a line on canvas, we can use lineTo method.

<canvas id="Canvas1" width="300" height="200" style="border: 1px solid green;">Canvas is not supported in your browser
</canvas>
    <br />
    <input type="button" onclick="DrawLines()" value="Draw Line" />
    
        <script type="text/javascript">
        function DrawLines() {
            var context = document.getElementById("Canvas1").getContext("2d");
            context.beginPath();
            context.moveTo(50, 60);
            context.lineTo(50, 100);
            context.lineTo(200, 100);
            context.lineTo(200, 50);
            context.lineTo(70, 25);
            context.closePath(); // optional
            context.stroke();
        }
    </script>

In the above code snippet, on click of the button DrawLines() function is called. In this function, we have first retrieved the Canvas element using document.getElementById and then get its context by calling the getContext method. getContext method accepts a parameter of dimension object we want to create. At the time of writing this ebook, HTML5 supports only 2 dimensional object.

In the above code snippet, following mnethods on the context object are being used

1. beginPath() - used to create a new path
2. moveTo() - move the drawing position to x and y axis
3. lineTo() - used to draw a virtual line (not physical line)
4. closePath() - used to close the newly created path
5. stroke() - used to mark the stroke on the virtual line created by lineTo() method.

To begin drawing line, we need to move our pointer to a place from where we want to start drawing line, this can be done by calling the moveTo() method by passing the x coordinates and y coordinates value in terms of pixel on the canvas. Before we do that we should call the beginpath() method that notifies that we are going to create a new path on the Canvas.

After moveTo(), to draw a line we call lineTo() method by passing x and y coordinates that starts the line from starting x coordinates and end to its y coordinates, similarly we can move around the canvas by calling the lineTo method (Note that lineTo method doesn’t physically draw the line, it just create a virtual line based on the x and the y coordinates passed to it).

At last we can call closePath() method that automatically closes the path by going to its originating starting position. Once we are done with drawing the line, we need to call the stroke() method on the context that will actually create a stroke on the specified virtual lines drawn by lineTo method.

OUTPUT

HTML5 canvas line style

To apply line style like width, color, we can set lineWidth and strokeStyle properties respectively.

 <script>
        function DrawLines() {

            var context = document.getElementById("Canvas1").getContext("2d");
            context.moveTo(50, 60);
            context.lineTo(200, 100);
            context.lineTo(200, 100);
            context.lineWidth = 5;
            context.strokeStyle = "red";
            context.stroke();
        }
    </script>

Canvas line with style

HTML Canvas Shadow style

To draw line with shadow on canvas we can set shadow related properties on the context object. These properties are

1. shadowColor - to set the color of the shadow
2. shadowBlur - to set the blur/ intensity of the shadow
3. shadowOffsetX - to set the distance of the shadow in x axis (horizontally)
4. shadowOffsetY - to set the distance of the shadow in y axis (vertically)

    <script>
        function DrawLines() {

            var context = document.getElementById("Canvas1").getContext("2d");

            context.moveTo(50, 60);

            context.lineTo(200, 100);
            context.lineTo(200, 100);
            context.lineWidth = 5;
            context.strokeStyle = "red";
            context.shadowColor = "green";
            context.shadowOffsetX = 2;
            context.shadowOffsetY = 4;
            context.stroke();
        }
    </style>

HTML5 Canvas shadow style

Line cap:

It is used to add the  different shapes to the lines of the canvas.

<canvas id="myCanvas" width="500" height="200"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        
        context.beginPath();
        context.moveTo(200, canvas.height / 2 - 50);
        context.lineTo(canvas.width - 200, canvas.height / 2 - 50);
        context.lineWidth = 20;
        context.strokeStyle = 'green';
        context.lineCap = 'butt';
        context.stroke();

       
        context.beginPath();
        context.moveTo(200, canvas.height / 2);
        context.lineTo(canvas.width - 200, canvas.height / 2);
        context.lineWidth = 20;
        context.strokeStyle = 'lime';
        context.lineCap = 'round';
        context.stroke();
    </script>

Line cap

In the above coe snippet we have defined the line cap we have taken two lines for determining the line cap one line line cap as butt and another as round which produces the lines as round and butt shape 

output