Canvas and SVG
HTML provides two ways to draw graphics — <canvas> for pixel-based drawing with JavaScript, and <svg> for vector shapes that scale perfectly to any size.
Canvas — Pixel Drawing
Example — Drawing on Canvas
<canvas id="c" width="300" height="130"></canvas> <script> var ctx = document.getElementById('c').getContext('2d'); // Filled rectangle ctx.fillStyle = '#e8573a'; ctx.fillRect(20, 20, 110, 60); // Circle ctx.beginPath(); ctx.arc(220, 65, 45, 0, Math.PI * 2); ctx.fillStyle = '#60a5fa'; ctx.fill(); // Text ctx.fillStyle = '#a6e3a1'; ctx.font = 'bold 12px monospace'; ctx.fillText('Canvas!', 20, 110); </script>
Canvas is pixel-based — once drawn you cannot select or resize shapes. Great for games and real-time charts.
SVG — Scalable Vectors
Example — SVG Shapes
<svg width="300" height="130" xmlns="http://www.w3.org/2000/svg"> <!-- Rectangle with rounded corners --> <rect x="10" y="10" width="110" height="70" fill="#e8573a" rx="8"/> <!-- Circle --> <circle cx="220" cy="55" r="45" fill="#60a5fa"/> <!-- Text --> <text x="10" y="115" fill="#a6e3a1" font-size="13" font-family="monospace"> SVG scales perfectly! </text> </svg>
SVG shapes are DOM elements — you can target them with CSS and JavaScript and add event listeners.
Canvas vs SVG
Canvas vs SVGWhen to Use
Canvas useGames, image processing, real-time animations with thousands of moving objects
SVG useLogos, icons, charts, illustrations that must scale and be interactive or animated
CanvasFaster for complex scenes — draws once then stores as pixels. No DOM per shape
SVGEach shape is a DOM element. Searchable, accessible, CSS-styleable, zoomable
SVG iconsOften smaller than PNG. Fully customizable with CSS. Perfect for responsive design
Canvas API Reference
Canvas MethodsMost Used
fillRect(x,y,w,h)Draw filled rectangle at position x,y with width w and height h
strokeRect(x,y,w,h)Draw rectangle outline only
arc(x,y,r,start,end)Draw a circle or arc. Use 0 to Math.PI*2 for full circle
fillText(text,x,y)Draw text at position. Set ctx.font first
drawImage(img,x,y)Draw an image element onto the canvas
clearRect(x,y,w,h)Erase a rectangular area — used in animation loops
SVG Icons in HTML
Modern websites embed SVG icons directly in HTML instead of using icon font libraries. Inline SVG is faster to load, fully customizable with CSS variables, and perfectly accessible with title and desc tags.
Canvas and SVG History
Canvas was invented by Apple in 2004 for macOS Dashboard widgets. SVG was standardized by W3C in 2001 but became widely used only when browsers improved SVG rendering around 2010. Google Maps used Canvas heavily which drove browser optimization.