Drawing a line: How to draw a line using HTML 5?

HTML5 canvas API provides basics tools and great supports to draw and style different types of sub paths including lines, arcs, Quadratic curves, and Bezier curves, as well as a means for creating paths by connecting sub paths. In this tutorial, we would learn how to draw a line using HTML5. Using HTML5, anyone can draw a line very easily.

Steps to draw a line using HTML5

Step 1: For any HTML file, we must have to define a html file firstly. And we have to draw a line of that file. That's why, we create a file named as DrawLine.html. How, to create a basic HTML file is not discussed here. Yet a basic code of this file will be presented. So, the file DrawLine.html's basic code will be like the following:

<html>
    <head>
    
    </body>
</html>

Note: from step 2 to step 5, we have to define before body code of the HTML file

Step 2: Now, we need to define a 2D canvas context and set the line style using the API of HTML6. To do this, we have to get the canvas DOM element by its ID and then have to declare a 2d context using the getContext() method of the canvas object. So, the code will look like the followings:

<script>
    window.onload = function(){
		var canvas = document.getElementById("myLine");
		var context = canvas.getContext("2d");

Step 3:In this step, we have to define the outlook of the 2d line. We will set the width and color of the line. We use lineWidth and strokeStyle to defined that. The code will look like the following:

context.lineWidth = 5;
context.strokeStyle = "red";        

Step 4: It's time to position the canvas context and draw the line. Remember, at first we have to position and then start drawing. The code to do this are the followings:

context.moveTo(150 - 50);
context.lineTo(500, 50);

Step 5: The line has drawn but we have not yet defined the visible color. To, make the line visible with the stroke color we need an line of code like the following:

context.stroke();
};

Step 6: We are ready, to use the line. But to do this, we must have to em-bade the code into the HTML body document. The code looks like the following:

<canvas id="myLine" width="600" height="100" style="border:2px solid black;">
        </canvas>

Now, we are ready to see the output of the above lines of code. The output will be like the following figure:

Full code of this tutorial

Below, you will find full code of this tutorial. Just copy that code and save as DrawLine.html and see what it gives you!

<html>
    <head>
        <script>
            window.onload = function(){
				var canvas = document.getElementById("myLine");
				var context = canvas.getContext("2d");
                context.lineWidth = 5;
				context.strokeStyle = "red";
				context.moveTo(100, 50);
				context.lineTo(500, 50);
			    context.stroke();
            };
        </script>
    </head>
    <body>
        <canvas id="myLine" width="600" height="100" style="border:2px solid black;">
        </canvas>
    </body>
</html>

More by this Author


Comments

No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working