EN
JavaScript - how to set path width (thickness / size) drawing on canvas element?
17
points
Simple solution:
context.lineWidth = 20; // 20px
context.beginPath();
context.moveTo(20, 40);
context.lineTo(70, 150);
context.lineTo(110, 80);
context.lineTo(180, 170);
context.stroke();
Using JavaScript it is possible to path in following way.
1. lineTo method example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
#my-canvas { border: 1px solid gray; }
</style>
</head>
<body>
<canvas id="my-canvas" width="200" height="200"></canvas>
<script>
var canvas = document.querySelector('#my-canvas');
var context = canvas.getContext('2d');
function drawLine() {
context.lineWidth = 20;
context.beginPath();
context.moveTo(20, 40);
context.lineTo(70, 150);
context.lineTo(110, 80);
context.lineTo(180, 170);
context.stroke();
}
drawLine();
</script>
</body>
</html>