FSM Full Stack Masterclass
Platform under construction
JavaScript course badge

Graphics, Media & UI

Advanced

Canvas with JavaScript

Canvas is a bitmap drawing surface controlled with JavaScript.

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#f7df1e";
ctx.fillRect(20, 20, 120, 80);

Graphics, Media & UI

Canvas with JavaScript connects JavaScript to visual interfaces.

Canvas is a bitmap drawing surface controlled with JavaScript.

Visual JavaScript should make state easier to understand. The code must stay connected to real data, user intent and accessibility.

A polished interface is not only animation. It is timing, feedback, labels, fallback states and predictable interaction.

Core API

getContext("2d")

Visual goal

Use motion or graphics to explain state, not to distract from it.

Accessibility

Keep text, labels and keyboard alternatives available.

Performance

Avoid layout-heavy loops and unnecessary repaints.

Examples

Visual JavaScript should clarify the interface.

Let JavaScript express visual state clearly

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#f7df1e";
ctx.fillRect(20, 20, 120, 80);

Create visuals without data or accessibility

canvas.width = 300;
// Drawing code is missing, so the canvas stays blank.

Code patterns

Reusable examples for quick reference.

Use these examples when turning data, state and interaction into something visible.

Working visual pattern

A direct example of the topic.

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#f7df1e";
ctx.fillRect(20, 20, 120, 80);

Weak visual pattern

A shortcut that makes the interface fragile.

canvas.width = 300;
// Drawing code is missing, so the canvas stays blank.

Respect reduced motion

Users may ask the browser for less animation.

const prefersReducedMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
if (!prefersReducedMotion) {
  element.animate(keyframes, options);
}

Keep labels in the DOM

Visuals should not be the only source of meaning.

<figure>
  <canvas aria-label="Monthly revenue chart"></canvas>
  <figcaption>Revenue increased over four months.</figcaption>
</figure>

Rules that matter

Richer UI needs richer responsibility.

Motion, canvas and drag/drop can improve a product, but only when they stay usable and understandable.

Connect visuals to data

Do not hard-code charts or status when data should drive them.

Keep text alternatives

Canvas, charts and drag/drop need labels or fallback content.

Use CSS for simple motion

JavaScript should orchestrate, CSS can animate state.

Avoid layout loops

Repeated measurements and writes can hurt performance.

Respect user preferences

Reduced motion and keyboard use are part of production design.

Test different input methods

Mouse, keyboard and touch can behave differently.

Production thinking

Ship visual code that remains readable, fast and accessible.

Why does this matter?

Graphics and interaction are where users feel quality immediately. Small implementation choices decide whether the UI feels smooth or chaotic.

Accessibility

Visual UI needs semantic labels, focus management, reduced motion support and alternatives for pointer-only behavior.

Production note

Production visual code should be measured, tested on real devices and kept separate from business logic where possible.

SEO note

Important text should not exist only inside canvas pixels or animation frames.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

  • Change one visual value and run the example again.
  • Add one text label that explains the visual state.
  • Describe what should happen if animation is disabled.

Practice assignment

Do this before moving to the next topic.

  1. Build the simplest static version first.
  2. Add JavaScript to update one visible state.
  3. Check that a user can still understand the UI without relying only on motion.

Try it yourself

Experiment with Canvas with JavaScript

Live preview

Self-check

Before you continue, prove that you understand Canvas with JavaScript.

Advanced

Answer these before moving to the next graphics and UI lesson.

  1. What data or state drives this visual behavior?
  2. Where is the accessible label or explanation?
  3. Could CSS handle part of this interaction more cleanly?
  4. What performance risk exists?
  5. How would this work for keyboard or reduced-motion users?

Senior audit upgrade

Extra production context for Canvas with JavaScript.

Motion and input checklist

  • Respect prefers-reduced-motion.
  • Keep keyboard and touch alternatives available.
  • Do not rely on drag, hover or animation as the only path.
  • Prefer transform and opacity for smooth UI animation.