Canvas & SVG in HTML
From the HTML cheat sheet · Media & Graphics · verified Jul 2026
Canvas & SVG
Graphics and drawing elements
css
<!-- Canvas for JavaScript drawing -->
<canvas id="myCanvas" width="400" height="300">
Your browser doesn't support canvas.
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);
</script>
<!-- Inline SVG -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="80" fill="green" />
<text x="100" y="100" text-anchor="middle" fill="white">SVG</text>
</svg>
<!-- SVG as image -->
<img src="graphic.svg" alt="SVG graphic">html
<canvas id="canvas" width="200" height="100"></canvas>
<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" fill="red"/>
</svg>💡 Canvas for dynamic/interactive graphics
📌 SVG for scalable vector graphics
⚡ SVG better for icons, Canvas for games
🟢 Essential for data visualization
🔗 Related: WebGL for 3D graphics
canvassvggraphics