How to Add a Cap to HTML5 Canvas Line
In this article I have described about the way to add cap in HTML5 canvas line with the help of example.
Canvas Line cap in HTML5
In HTML5 canvas element have some interesting property which decide the shape of a canvas line i.e. "linecap" property.
The main aim of this property is to add cap to canvas line.
Usually there are three type of cap style of canvas line in HTML5
- Butt cap
- Round cap
- Square cap
Syntax
|
<script>
context.lineCap = 'round/butt/square';
</script>
|
Lets take an example
Now we have to add
|
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function ()
{
var canvas = document.getElementById("caplineCanvas");
var context = canvas.getContext("2d");
// round line cap
context.beginPath();
context.moveTo(200, canvas.height / 2);
context.lineTo(canvas.width - 200, canvas.height / 2);
context.lineWidth = 30;
context.strokeStyle = "#00ff11";
context.lineCap = "round";
context.stroke();
};
</script>
</head>
<body>
<canvas id="caplineCanvas" width="600" height="200"></canvas>
</body>
</html>
|
OUTPUT
You may also want to read these related articles :
Ask Your Question
Got a programming related question? You may want to post your question here
Programming Answers here