Canvas Graphic HTML Javascript line thick Example

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 context
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");

        // Set the line thickness
        ctx.lineWidth = 10; // You can adjust this value to change the line thickness

        // Set line color
        ctx.strokeStyle = "blue";

        // Draw a line
        ctx.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 line
        ctx.closePath();
    </script>
</body>
</html>

Output:


Canvas Line Thickness

Comments :

Post a Comment