Home HTML Reference <canvas>

<canvas>

tag HTML5

A container for graphics drawn via JavaScript. Used for games, charts, image manipulation.

Syntax

<canvas id="myCanvas" width="500" height="300"></canvas>

Example

html

<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = '#3498db';
    ctx.fillRect(20, 20, 150, 100);
    ctx.fillStyle = '#e74c3c';
    ctx.beginPath();
    ctx.arc(250, 120, 50, 0, Math.PI * 2);
    ctx.fill();
</script>