HTML5 Canvas API Playground

The HTML5 Canvas API is a JavaScript interface for drawing 2D graphics in a <canvas> element. You use canvas.getContext('2d') to get a 2D rendering context, then call methods like fillRect, arc, beginPath, and drawImage to render shapes, text, and images. It is widely used for games, data visualizations, animations, and image processing.

requestAnimationFrame (rAF) schedules your draw function to run before the browser's next repaint, typically 60 times per second. Unlike setInterval, rAF is synchronized with the display refresh rate, pauses when the tab is hidden (saving CPU), and provides a high-resolution timestamp. Always call rAF at the end of your draw function to create a loop.

Common causes include: doing too much work per frame (complex calculations, DOM reads), drawing more than needed (redrawing unchanged areas), using save/restore excessively, and creating garbage (new objects every frame). Use an off-screen canvas for complex static backgrounds, minimize state changes, and profile with browser DevTools to find bottlenecks.

Track elapsed time using the timestamp provided by requestAnimationFrame. Use the delta (time since last frame) to move objects by distance = speed * delta, not by a fixed amount. This ensures animations look the same regardless of frame rate. For FPS limiting, compare elapsed time to your target interval (e.g., 1000/30 for 30 FPS).

The trail effect draws a semi-transparent black rectangle over the canvas each frame instead of clearing it fully. This leaves 'ghost' copies of previous frames that fade out over time. The transparency value controls fade speed — lower alpha = longer trails. Set fillStyle to rgba(0,0,0,0.1) for slow fades or rgba(0,0,0,0.3) for quick ones.

Call canvas.toDataURL('image/png') to get a base64-encoded PNG, or canvas.toBlob(callback, 'image/png') for a Blob. You can create a temporary <a> element with href set to the data URL and trigger a click to download it: const a = document.createElement('a'); a.href = canvas.toDataURL(); a.download = 'canvas.png'; a.click().