Canvas API
The <canvas> element provides a pixel-based drawing surface via JavaScript. Use it for games, charts, and image manipulation.
HTML
Intermediate
4 min read
Canvas API
Example
<canvas id="myCanvas" width="300" height="150"
style="border:1px solid #ccc;"></canvas>
<script>
const ctx = document.getElementById("myCanvas").getContext("2d");
// Rectangle
ctx.fillStyle = "steelblue";
ctx.fillRect(20, 20, 100, 70);
// Text
ctx.fillStyle = "white";
ctx.font = "16px Arial";
ctx.fillText("Canvas!", 40, 62);
// Circle
ctx.beginPath();
ctx.arc(230, 75, 40, 0, Math.PI * 2);
ctx.fillStyle = "coral";
ctx.fill();
</script> Pro Tip
Canvas is pixel-based (raster) — use SVG for shapes that need to scale or be selected.