canvas element is new to HTML5. You can use the
canvas to draw lines, shapes, text, and more. To draw a line onto the HTML5 Canvas, we will use various methods. The most common methods used in drawing lines are
beginPath() mehtod is to declare that we want to draw a line. Next is the
moveTo(), which is used to position the context point. Then we use the
lineTo() method to draw a straight line from the starting point to the new target point.
Finally, we use the
stroke() method to apply a stroke to the line and make it visible. The default stroke color is black, but we can style the line’s color (
strokeStyle) as well as other properties such as width (
lineWidth) or cap (
You should note that Internet Explorer 8 and earlier versions, do not support the
<canvas> element, nor the
context properties and/or methods.
context.beginPath(); context.moveTo(x, y); context.lineTo(x, y); context.stroke();
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #AAAAAA;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(100, 50); context.lineTo(300, 150); context.stroke(); </script>
Line Styling: Width, Color, and Cap
lineWidth property sets or returns the current line width, and the
lineCap property sets or returns the style of the end caps for a line. The
strokeStyle property sets or returns the color, gradient, or patterns.
context.lineWidth=number; context.lineCap="butt|round|square"; context.strokeStyle=color|gradient|pattern;
Here is an example of how to apply a different width, color, and cap to a line. You should note that the
lineCap values of
square increase the length of the line. The default value is
<script> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(100, 50); context.lineTo(300, 150); context.lineWidth = 5; context.lineCap = "round"; context.strokeStyle = '#FFAA00'; context.stroke(); </script>