HTMLCSSJAVASCRIPTANGULARINTERVIEW QUESTIONSSQLPYTHONJAVAPHPHOW TOW3.CSSCC++C#BOOTSTRAPREACTMYSQLJQUERYEXCELXMLDJANGONUMPYPANDASNODEJSDSATYPESCRIPTANGULARJSGITPOSTGRESQLMONGODBASPAIRGOKOTLINSWIFTSASSVUEGEN AIAGENTIC AIPROMPT ENGINEERINGDOCKERKUBERNETESSPRINGSPRING BOOTUNIXSCIPYAWSCYBERSECURITYDATA SCIENCEINTRO TO PROGRAMMINGINTRO TO HTML & CSSBASHRUSTTOOLSHTMLCSSJAVASCRIPTANGULARINTERVIEW QUESTIONSSQLPYTHONJAVAPHPHOW TOW3.CSSCC++C#BOOTSTRAPREACTMYSQLJQUERYEXCELXMLDJANGONUMPYPANDASNODEJSDSATYPESCRIPTANGULARJSGITPOSTGRESQLMONGODBASPAIRGOKOTLINSWIFTSASSVUEGEN AIAGENTIC AIPROMPT ENGINEERINGDOCKERKUBERNETESSPRINGSPRING BOOTUNIXSCIPYAWSCYBERSECURITYDATA SCIENCEINTRO TO PROGRAMMINGINTRO TO HTML & CSSBASHRUSTTOOLS
    HTML Tutorial 0/139 lessons ~6 min read Lesson 47

    HTML Canvas

    html canvas canvas separates tutorial demos from production engineering: explicit dimensions <canvas> is an immediate-mode bitmap surface — not a

    Course progress0%
    Focus
    18 guided sections
    Practice signal
    Examples included
    Career prep
    Interview Q&A included

    Introduction

    <canvas> is an immediate-mode bitmap surface — not a retained scene graph. Staff engineers treat canvas markup as a performance contract: intrinsic width/height attributes define the backing store resolution, CSS scales the display box, and every frame you redraw is main-thread paint work that can starve INP on mid-tier Android devices.

    Business problem

    Business pressure: Product teams want Figma-grade charts, confetti celebrations, and real-time dashboards inside marketing pages. Canvas delivers visual impact but shifts cost from declarative HTML to JavaScript loops — Netflix-style data viz and Spotify's playback visualizer both learned that unbounded canvas redraws correlate with session abandonment on low-end GPUs.

    • Conversion: Hero canvas animations that block the main thread for 200ms+ during scroll increase bounce on checkout landers — measure INP, not just FPS.
    • Compliance: Canvas-drawn text is pixels, not selectable DOM — screen readers see an empty rectangle unless you mirror state in ARIA live regions.
    • SEO: Crawlers index surrounding HTML, not canvas pixels — critical copy must never be drawn-only.

    Why this feature exists

    Platform motivation: HTML5 canvas replaced Flash and Java applets for in-browser pixel manipulation. Apple and Mozilla needed a sandboxed, scriptable graphics API without NPAPI plugins; game studios and charting libraries (Chart.js, PixiJS) standardized on it before WebGL matured.

    • History: Introduced in WHATWG HTML5 (2004–2010); 2D context spec stabilized while WebGL became the path for GPU-heavy workloads like Google Maps vector tiles.
    • Alternative rejected: SVG alone cannot efficiently render 10k moving particles or per-pixel image filters — retained DOM nodes explode memory.
    • Modern role: Still the fallback for 2D charts, signature pads, and thumbnail generation; heavy 3D moves to WebGL/WebGPU inside the same element.

    Browser internals

    Inside the engine: When the parser encounters <canvas>, it creates an HTMLCanvasElement with an internal bitmap buffer sized by attributes (default 300×150 CSS pixels). getContext('2d') returns a CanvasRenderingContext2D that records draw commands; the compositor treats the canvas as a replaced element — paint invalidates the layer on each draw call batch.

    • Parser: Canvas is void-like with closing tag required in HTML; child content is fallback for non-supporting browsers only.
    • Backing store vs CSS size: Setting width="800" height="400" with style="width:400px" doubles pixel density — affects memory (width×height×4 bytes) and sharpness.
    • Script impact: Synchronous getImageData forces readback from GPU on many implementations — stalls the main thread.
    javascript
    // DevTools → Elements → select canvas → Console:
    const c = document.querySelector('canvas');
    console.log(c.width, c.height);           // backing store
    console.log(getComputedStyle(c).width);   // layout box
    const ctx = c.getContext('2d');
    ctx.fillRect(0, 0, 100, 100);             // marks canvas dirty → repaint

    Rendering workflow

    Rendering path: Canvas sits in the render tree as a replaced element. Each 2D draw may trigger: state update → rasterization into bitmap → upload to compositor layer → composite. Unlike SVG reflow, canvas size changes do not reflow siblings unless CSS dimensions change — but clearing/redrawing every animation frame is continuous paint work.

    • Critical path: Canvas above the fold with init script in <head> delays first paint until JS runs — defer init below hero HTML or use requestAnimationFrame.
    • Layout: Always set explicit CSS width/height alongside attributes to prevent CLS when JS mounts the element.
    • Paint: will-change: transform on a wrapper promotes a layer; drawing 60fps full-canvas clears still burns GPU fill rate on Mali GPUs.

    Feature deep dive

    Canvas production model: Immediate-mode API — you issue commands, pixels change, shapes are not remembered. Use save()/restore() for transform stacks; batch draws; prefer OffscreenCanvas in workers for thumbnail generation (Google Photos-style previews).

    • 2D context: Paths, transforms, text, drawImage, gradients — stateful pen, not retained objects.
    • HiDPI: const dpr = devicePixelRatio; canvas.width = w * dpr; ctx.scale(dpr, dpr); — Stripe Dashboard pattern for crisp charts.
    • Accessibility bridge: Maintain parallel DOM or aria-label + keyboard handlers — BBC Sport live charts expose data tables alongside canvas.
    html
    <canvas id="chart" width="640" height="320" role="img" aria-label="Revenue trend Q1–Q4"></canvas>
    <script type="module">
      const canvas = document.getElementById('chart');
      const ctx = canvas.getContext('2d');
      const dpr = devicePixelRatio || 1;
      canvas.width = 640 * dpr;
      canvas.height = 320 * dpr;
      ctx.scale(dpr, dpr);
      // draw once; animate only dirty regions
      function drawBars(data) {
        ctx.clearRect(0, 0, 640, 320);
        data.forEach((v, i) => {
          ctx.fillStyle = '#6366f1';
          ctx.fillRect(40 + i * 80, 320 - v, 48, v);
        });
      }
      drawBars([120, 180, 90, 210]);
    </script>

    Accessibility analysis

    A11y architecture: Canvas has no accessibility subtree — assistive tech sees a single node with optional name from role="img" and aria-label. WCAG 1.1.1 Non-text Content requires equivalent text or programmatically determinable data; Netflix's progress scrubber duplicates state in visually hidden text updated on seek.

    • Screen readers: NVDA/VoiceOver announce "graphic" + label only — dynamic charts need aria-live="polite" summaries on data change.
    • Keyboard: Custom canvas UIs must implement focus rings and arrow-key navigation — Figma's canvas is canvas+DOM hybrid for this reason.
    • WCAG: 2.2 Focus Not Obscured applies when canvas overlays cover focusable controls — z-index and pointer-events matter.

    SEO impact

    SEO architecture: Googlebot does not OCR canvas pixels. Any headline, price, or CTA drawn exclusively on canvas is invisible to indexing — Shopify merchants lost rich snippets when product titles moved to WebGL-only previews.

    • Crawl: Surrounding semantic HTML (<h1>, <p>, JSON-LD) must carry indexable content.
    • Rich results: Chart data belongs in structured data or visible tables — not only canvas.
    • Core Web Vitals: Canvas init in critical path hurts LCP when it replaces the LCP element (e.g., hero animation instead of <img>).

    Security considerations

    Security boundary: Canvas can leak cross-origin pixels via toDataURL() unless CORS taints the canvas. User-uploaded images drawn without crossOrigin="anonymous" and proper ACAO headers become a fingerprinting and exfiltration vector — Facebook's old profile cropper incidents drove stricter taint rules.

    • XSS: Canvas does not execute HTML, but scripts driving canvas often use innerHTML for tooltips — sanitize separately.
    • CSP: img-src and connect-src govern images fetched into canvas; blob URLs need explicit policy.
    • Clickjacking: Transparent canvas overlays capturing clicks are a UI-redress pattern — use pointer-events: none on decorative layers.

    Performance impact

    Performance: Canvas affects main-thread time, GPU memory, and battery. Spotify's Canvas feature (looping video/gif behind tracks) is gated on device capability — staff teams cap frame rate and resolution like Netflix caps bitrate.

    • LCP: Never make canvas the LCP element without a static poster — use <img fetchpriority="high"> first.
    • INP: Pointer handlers that synchronously redraw full canvas on every mousemove cause 300ms+ delays — throttle with rAF and dirty rectangles.
    • CLS: Reserve space: <canvas width="640" height="360" style="width:100%;max-width:640px;height:auto;aspect-ratio:16/9">.

    Real production example

    Netflix playback UI pattern: Buffering spinner and scrubber thumbnails use canvas/WebGL layers composited over <video>, but metadata and controls remain real DOM for a11y and test automation.

    • Pattern: Static poster in HTML; canvas only for scrub preview frames generated on demand.
    • Worker offload: Thumbnail decode in Worker + OffscreenCanvas — keeps INP under 200ms.
    • Feature flag: Disable heavy canvas effects on navigator.deviceMemory < 4.
    javascript
    // Netflix-style scrub preview — worker generates, main thread blits
    const worker = new Worker('/canvas-thumb-worker.js');
    worker.postMessage({ videoUrl, time: 42.5 });
    worker.onmessage = (e) => {
      const bmp = e.data.bitmap;
      ctx.drawImage(bmp, 0, 0);
      bmp.close();
    };

    Enterprise usage

    Enterprise: Banks use canvas for signature capture pads; charts in Salesforce dashboards run axe checks on parallel data tables. Design systems document when canvas is forbidden (marketing SEO pages) vs allowed (logged-in analytics).

    • Design system: "No canvas for text" rule — enforced via ESLint custom rule on fillText in marketing packages.
    • CMS: WYSIWYG cannot embed arbitrary canvas scripts — only approved chart web components.
    • CI gates: Lighthouse performance budget fails if canvas JS > 50KB gzipped on landing templates.

    Common production failures

    What breaks in prod: Canvas incidents are perf and a11y cliffs, not syntax errors — they surface in RUM, not unit tests.

    • Incident: Trading dashboard redrew 4K canvas on every WebSocket tick — main thread frozen, INP p75 890ms, users blamed "browser crash."
    • SEO regression: A/B test replaced H1 with canvas text — organic traffic −18% in 6 weeks before rollback.
    • Perf regression: Missing HiDPI scaling on iPhone — blurry charts → support tickets; fix was 3 lines, detection took 2 sprints.

    Architecture review questions

    • Does backing-store size match CSS size × devicePixelRatio without exceeding memory budget?
    • Is all indexable text present outside the canvas bitmap?
    • Can a keyboard user access every data point without a mouse?
    • What happens to INP if WebSocket updates arrive 10× per second?
    • Are cross-origin images drawn with proper CORS to avoid taint?
    • What is the fallback when canvas or WebGL is unavailable?

    Hands-on project

    Project: Build a production-quality sparkline component: semantic summary table for SR, canvas for visual, Worker for data aggregation, RUM beacon for render time.

    • Deliverable: Canvas with role="img", live region updates, keyboard focus on data points via invisible buttons.
    • Verify: axe zero critical; LCP unaffected; INP < 200ms on Moto G4 throttling.
    • Stretch: Feature-detect OffscreenCanvas and document fallback ADR.

    Interview questions

    When would you choose canvas over SVG for a production chart?(Advanced)

    Canvas when point count exceeds ~1k animated nodes, when I need pixel readback, or when DOM node overhead hurts memory — e.g., real-time trading ticks. SVG when accessibility, CSS styling, and DOM events per bar matter and counts stay under a few hundred.

    Follow-up: How do you make canvas charts accessible?

    Explain canvas taint and CORS.(Advanced)

    Drawing a cross-origin image without CORS approval taints the canvas — toDataURL and getImageData throw. Fix: crossOrigin='anonymous' on the image and Access-Control-Allow-Origin on the CDN. Required for export features and thumbnail pipelines.

    Follow-up: What breaks if CDN sends wrong ACAO headers?

    How does canvas affect Core Web Vitals?(Advanced)

    LCP if canvas replaces hero image without poster. INP if pointer handlers sync-draw large frames. CLS if dimensions not reserved. Mitigate: rAF batching, dirty rects, OffscreenCanvas, explicit aspect-ratio.

    Follow-up: How would you profile this in Chrome DevTools?

    Try it yourself

    Edit the HTML, CSS, or JS panels — the preview updates as you type.

    Try it yourself

    Preview

    Summary

    Canvas separates tutorial demos from production engineering: explicit dimensions for CLS, HiDPI scaling, accessibility mirrors, CORS-aware image draws, and INP-safe animation loops — the patterns Netflix and Stripe use for charts without sacrificing Web Vitals.

    Ready to mark this lesson complete?Track your journey across the entire course.