Web APIs Canvas SVG
Canvas and SVG Graphics
Draw graphics and animations in the browser.
Canvas Example
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 150, 80);
ctx.font = "20px Arial";
ctx.fillStyle = "white";
ctx.fillText("Hello Canvas!", 20, 50);
</script>Key Points
- Canvas: bitmap, immediate mode.
- SVG: vector, retained mode.
- Canvas methods:
fillRect, strokeRect, arc, bezierCurveTo. - Performance: Canvas for games, SVG for UI icons.