EN
JavaScript - how to set path width (thickness / size) drawing on canvas element?
17 points
Simple solution:
xxxxxxxxxx1
context.lineWidth = 20; // 20px2
3
context.beginPath();4
context.moveTo(20, 40);5
context.lineTo(70, 150);6
context.lineTo(110, 80);7
context.lineTo(180, 170);8
context.stroke();
Using JavaScript it is possible to path in following way.
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
context.beginPath();22
context.moveTo(20, 40);23
context.lineTo(70, 150);24
context.lineTo(110, 80);25
context.lineTo(180, 170);26
context.stroke();27
}28
29
drawLine();30
31
</script>32
</body>33
</html>