EN
JavaScript - set lineCap property on canvas
0 points
In this article, we would like to show you how to set lineCap property while drawing on canvas using JavaScript.
Quick solution:
xxxxxxxxxx1
context.lineCap = 'round'; // 'square' or 'butt' (default)2
3
4
// Usage example:5
6
context.lineWidth = 20;7
context.beginPath();8
context.moveTo(10, 50);9
context.lineTo(10, 100);10
context.stroke();11
12
drawLine();
In this example, we present three lines with different lineCap property values.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
#my-canvas { border: 1px solid gray; }7
8
</style>9
</head>10
<body>11
<canvas id="my-canvas" width="200" height="200"></canvas>12
<script>13
14
var canvas = document.querySelector('#my-canvas');15
var context = canvas.getContext('2d');16
17
function drawLine() {18
19
context.lineWidth = 20;20
21
// line 122
context.lineCap = 'butt'; // <--- (default)23
context.beginPath();24
context.moveTo(50, 50);25
context.lineTo(50, 150);26
context.stroke();27
28
// line 229
context.lineCap = 'square'; // <---30
context.beginPath();31
context.moveTo(100, 50);32
context.lineTo(100, 150);33
context.stroke();34
35
// line 336
context.lineCap = 'round'; // <---37
context.beginPath();38
context.moveTo(150, 50);39
context.lineTo(150, 150);40
context.stroke();41
}42
43
drawLine();44
45
</script>46
</body>47
</html>