Once I happened to attend HTML5 Event in India and then, I started realizing the power of HTML5. I wish to write lot of HTML5 tutorials, but today we learn about HTML5 Canvas element and how to draw a line using it.
The Canvas element is similar to any other HTML tag like <p>, <span> etc…But the contents of Canvas is rendered with JavaScript. It means, the Canvas tag is created anywhere in the HTML document, referenced in JavaScript, a context is created and a visual object is drawn; such line, circle, arc, square, rectangle, triangle, curves, corners, images etc…It also helps you to decorate the drawn objects by filling colors, gradients, patterns, cropping images, resizing etc…
Canvas Element and Canvas Context
I spoke about Canvas Element and then said Create Canvas context isn’t? To make it simple, both are required and there is a difference between them as well. Canvas Element is the DOM node that is placed in HTML page as below.
<body> <canvas id="canvasDemo" width="500" height="400"></canvas> </body>
The Canvas Context is an object with properties and methods, which is used to render graphics inside the said canvas element. The Context can be either 2D or 3D. Here’s an example.
<body>
<canvas id="canvasDemo" width="500" height="400"></canvas>
<script>
var canvas = document.getElementById('canvasDemo');
var context = canvas.getContext('2d');
// your code goes here...
</script>
</body>One Canvas, One Context
Each canvas element can have only one context. We’ll learn about getContext() method later, which will always reference to same context object irrespective of number of times it is called.
The title says, we’ll draw a line isn’t? Lets speak about it now!
How to draw line in HTML5 Canvas?
The methods used for drawing a line are: beginPath(), moveTo(), lineTo() and stroke().
beginPath(): Initiates the new draw path.
moveTo(): Tells where to position the drawing cursor.
lineTo(): Till where the line should be drawn from the drawing cursor position.
stroke(): Draw it.
Let’s draw it now!
<canvas id="canvasLine" width="500" height="400"></canvas>
<script>
var canvas = document.getElementById('canvasLine');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 50);
context.lineTo(400, 150);
context.stroke();
</script>Set width using lineWidth property
To set a width for the line, you can use lineWidth property of canvas context. You should set it before calling stroke.
<canvas id="canvasLine" width="500" height="400"></canvas>
<script>
var canvas = document.getElementById('canvasLine');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 50);
context.lineTo(400, 150);
context.lineWidth = 13;
context.stroke();
</script>Set color for the line
We’ll use strokeStyle property to set color for the line. Use it before you call stroke() method.
<canvas id="lineColor" width="500" height="300"></canvas>
<script>
var canvas = document.getElementById('lineColor');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 50);
context.lineTo(300, 150);
context.strokeStyle = '#c93f27';
context.stroke();
</script>Various Line Styles (butt, round, square)
You can add cap to Lines using lineCap property with values as ‘butt’, ’round’ and ‘square’.
context.lineCap = 'square';
