HTML5 Canvas line Cap property can be set with lineCap attribute.
General code for adding “line cap” to a line using HTML5Canvas is:
how to “line cap” property using html5canvas
HTML5Canvas line Cap property can be set with “lineCap" attribute.
General code for adding line cap to a line using HTML5Canvas is:
context.lineCap =value-of-cap;
Line cap attributes of html5 Canvas line can take three values. These three values arebutt,round and square.
Shapes of three line cap for for html5 Canvas line
To add
butt as a “line cap” for HTML5Canvas line, the following code is used.
cotext.lineCap ='butt';
The shape of butt is as given.
2. square
To add square as a line capHTML5 Canvas,the code is given as.
context.lineCap ='square';
The shape of square cap is given under
3. round
The third type of “line cap" for HTML5Canvas line is round
The code for adding round as “line cap" is given below.
context.lineCap ='round';
The shape of round cap is given below
for HTML5Canvas line
HTML5Canvas “line cap” tutorial complete code example
<!DOCTYPE html >
<html>
<head>
<title>
line cap of html5 canvas line
</title>
</head>
<body >
<canvas id="myCanvas" width="600" height="400"
style="border: 1px solid #0000ff;" >
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// butt line cap (top line)
context.beginPath();
context.moveTo(100, 100);
context.lineTo(100,400);
context.lineWidth = 20;
context.strokeStyle = '#0000ff';
context.lineCap = 'butt';
context.stroke();
// round line cap (middle line)
context.beginPath();
context.moveTo(200, 100);
context.lineTo(200, 400);
context.lineWidth = 30;
context.strokeStyle = '#0000ff';
context.lineCap = 'round';
context.stroke();
// square line cap (bottom line)
context.beginPath();
context.moveTo(300,100);
context.lineTo(300,400);
context.lineWidth = 30;
context.strokeStyle = '#0000ff';
context.lineCap = 'square';
context.stroke();
</script>
</body>
</html>
Save this file with name
html5canvas-line-cap.html
open the above file in browser you will see the following result.
html5canvas “line cap” tutorial demo in browser
================================================
================================================
Html5canvas “line cap” live demo on pencode
[codepen_embed height=400 theme_id=1 slug_hash=’YPQKWB’ user=’aslamwaqar’
default_tab=’html’ animations=’run’]
[/codepen_embed]
