The <canvas> element provides a rectangular drawing surface for 2D graphics rendered with JavaScript. It is pixel-based and immediate-mode — you draw and the pixels are fixed.
Canvas is ideal for games, image editing, data visualization, and animations.
<!-- Canvas element with fallback -->
<canvas id="myCanvas" width="600" height="400">
Your browser does not support canvas.
</canvas>
<script>
const canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#4CAF50";
ctx.fillRect(50, 50, 200, 100);
}
</script>Set canvas width and height as HTML attributes, not CSS — CSS sizing distorts the drawing surface.