HTML Canvas

HTML Canvas: Drawing Dynamic 2D Graphics with JavaScript

The HTML canvas element creates a bitmap drawing surface where JavaScript renders shapes, charts, image filters, and browser games pixel by pixel. Because canvas only sets up the blank container, all actual drawing happens inside JavaScript using the 2D rendering context.

Setting Up Canvas Dimensions Correctly

Always set width and height as HTML attributes directly on the canvas tag (for example, width="400" height="220"). Resizing a canvas only with CSS stretches its existing pixel grid and produces blurry lines.

Inside JavaScript, grab the element and call canvas.getContext('2d') to access drawing methods like fillRect(), arc(), moveTo(), lineTo(), and fillText().

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Canvas Demo</title>
</head>
<body>
    <canvas id="chart-canvas" width="420" height="200" style="border: 1px solid #cbd5e1; border-radius: 8px;">
        Your browser does not support HTML5 Canvas.
    </canvas>

    <script>
        const canvas = document.getElementById('chart-canvas');
        const ctx = canvas.getContext('2d');

        // Background bars
        ctx.fillStyle = '#2563eb';
        ctx.fillRect(40, 60, 50, 110);
        ctx.fillStyle = '#0ea5e9';
        ctx.fillRect(110, 30, 50, 140);

        // Circle badge
        ctx.beginPath();
        ctx.arc(280, 95, 42, 0, Math.PI * 2);
        ctx.fillStyle = '#10b981';
        ctx.fill();

        // Label text
        ctx.fillStyle = '#0f172a';
        ctx.font = 'bold 16px system-ui, sans-serif';
        ctx.fillText('2D Canvas Metrics', 215, 165);
    </script>
</body>
</html>

Canvas vs. SVG

Choose canvas when animating thousands of fast-moving particles, video frames, or pixel-manipulation filters. Choose SVG when drawing crisp UI icons, interactive vector charts, or logos that must scale infinitely and respond to CSS hover rules.

Common Mistakes to Avoid

• Forgetting ctx.beginPath() before a new shape: Without beginPath(), calling stroke() or fill() redraws every previous path in memory.
• Scaling canvas size via CSS only: Match internal width/height attributes to the display aspect ratio (or devicePixelRatio for Retina sharpness).
• Omitting accessible fallback text: Include descriptive fallback text between the opening and closing canvas tags and add aria-label or role="img".

Frequently Asked Questions

Can HTML canvas render 3D graphics too?

Yes. Passing 'webgl' or 'webgl2' to canvas.getContext() enables GPU-accelerated 3D rendering in the browser.

Why does my canvas look blurry on Retina screens?

Multiply the canvas width and height attributes by window.devicePixelRatio and call ctx.scale(dpr, dpr) while keeping CSS dimensions unchanged.