Canvas Graphic HTML Javascript line thick draw Example code Ar3school tutorials
To set the thickness of lines drawn on an HTML canvas, you can use the lineWidth property of the canvas 2D rendering context. Here's an example of how you can draw a thick line on an HTML canvas:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Canvas Line Thickness</title></head><body><canvas id="myCanvas" width="500" height="500"></canvas><script>// Get the canvas element and its contextvar canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");// Set the line thicknessctx.lineWidth = 10; // You can adjust this value to change the line thickness// Set line colorctx.strokeStyle = "blue";// Draw a linectx.beginPath();ctx.moveTo(50, 50); // Starting point of the line (x, y)ctx.lineTo(450, 50); // Ending point of the line (x, y)ctx.stroke(); // Draw the linectx.closePath();</script></body></html>
Output:
Comments :
Post a Comment