To draw a line using HTML5 Canvas, we use four canvas API methods:
beginPath()moveTo()lineTo()stroke()
First, we can use the beginPath()
method to instructs the browser that we are about to draw a new path.
Next, we can use the moveTo(x, y) method to position the context point or drawing cursor.
In this way we set the line's starting point.
Then lineTo(x, y) method sets the ending point and draws
the line by connecting the two points.
At this point the line will be drawn, but it's still invisible.
Finally, to make the line visible, we use the stroke() method
to display the line with the default black color.
Unless otherwise specified, the stroke color is defaulted to black.
The following code draws a line on canvas.
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
<!--from ww w .ja v a 2 s . c om-->
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.stroke();
</script>
</body>
</html>
The code above is rendered as follows:
To change the width of an HTML5 Canvas line,
we can use the lineWidth property of the canvas context.
The lineWidth property must be set before calling stroke().
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
<!-- w w w . ja va 2 s . co m-->
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 15;
context.stroke();
</script>
</body>
</html>
The code above is rendered as follows:
To change the color of an HTML5 Canvas line,
we can use the strokeStyle property from the canvas context.
We can set the color string with values such as red, green, or blue, a hex value such as #FF0000 or #555, or an RGB value such as rgb(255, 0, 0).
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
<!-- w ww. j ava2 s.c o m-->
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 10;
// set line color
context.strokeStyle = '#ff0000';
context.stroke();
</script>
</body>
</html>
The code above is rendered as follows:
To add a cap to an HTML5 Canvas line, we can use the lineCap property.
Lines can have one of three cap styles:
Unless otherwise specified, HTML5 Canvas lines are defaulted to butt cap style.
The lineCap property must be set before calling stroke().
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
<!-- ww w. j a v a 2 s . c om-->
// butt line cap (top line)
context.beginPath();
context.moveTo(200, canvas.height / 2 - 50);
context.lineTo(canvas.width - 200, canvas.height / 2 - 50);
context.lineWidth = 20;
context.strokeStyle = 'red';
context.lineCap = 'butt';
context.stroke();
// round line cap (middle line)
context.beginPath();
context.moveTo(200, canvas.height / 2);
context.lineTo(canvas.width - 200, canvas.height / 2);
context.lineWidth = 20;
context.strokeStyle = 'black';
context.lineCap = 'round';
context.stroke();
// square line cap (bottom line)
context.beginPath();
context.moveTo(200, canvas.height / 2 + 50);
context.lineTo(canvas.width - 200, canvas.height / 2 + 50);
context.lineWidth = 20;
context.strokeStyle = '#EEEEEE';
context.lineCap = 'square';
context.stroke();
</script>
</body>
</html>
The code above is rendered as follows: