Friday, October 14, 2022

JavaScript - Drawing a Line

 <button onclick="draw()">Draw line</button>
    <canvas height="400" id="canvas" width="500">
    </canvas>
<script>
function draw() {
    const canvas = document.querySelector('#canvas');
    if (!canvas.getContext) {
        return;
    }
    const ctx = canvas.getContext('2d');
    // set line stroke and line width
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 5;
    // draw a red line
    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.lineTo(300, 100);
    ctx.stroke();
}
</script>

No comments:

Post a Comment

NaCl.xyz Generator with Interactive 3D Visualization

NaCl.xyz Generator with Interactive 3D Visualization NaCl.xyz Generator with Interactive 3D Visualization ...