KandZ – Tuts

We like to help…!

HTML 27 💻 canvas element

Draw in a web page

<canvas id="thecanvas" width="400" height="200"></canvas>
<script>
        const cnv = document.getElementById('thecanvas');
        const ctx = cnv.getContext('2d');

        ctx.fillStyle = 'red';
        ctx.fillRect(10, 10, 50, 40);
</script>

canvas element is used to draw graphics
You can do that by using JavaScript
You can create animations, games, data visualizations etc
canvas defines the drawing area and it requires a closing tag
width and height set the width and the height of the canvas
id is used to reference it in JavaScript
It is transparent and with no border

Leave a Reply