Canvas Sales Chart - Web Replay Lab

A canvas chart starts empty, gains axes, then adds each bar and label. The replay connects drawing calls to the browser-rendered pixels.

Program

Canvas drawing is immediate: each command changes pixels in the canvas bitmap. Step through the program to see when axes, bars, and text labels appear.

canvas_sales_chart.js

const canvas = document.querySelector('#chart');
const ctx = canvas.getContext('2d');

ctx.clearRect(0, 0, 240, 160);
ctx.strokeStyle = '#334155';
ctx.lineWidth = 2;
ctx.font = '14px sans-serif';

ctx.beginPath();
ctx.moveTo(30, 20);
ctx.lineTo(30, 130);
ctx.lineTo(210, 130);
ctx.stroke();

ctx.fillStyle = '#2563eb';
ctx.fillRect(50, 70, 32, 60);
ctx.fillStyle = '#172033';
ctx.fillText('Q1', 56, 148);

ctx.fillStyle = '#16a34a';
ctx.fillRect(100, 30, 32, 100);
ctx.fillStyle = '#172033';
ctx.fillText('Q2', 106, 148);

ctx.fillStyle = '#f97316';
ctx.fillRect(150, 50, 32, 80);
ctx.fillStyle = '#172033';
ctx.fillText('Q3', 156, 148);

canvas context A canvas context is the drawing object. Its state, such as `fillStyle` or `font`, affects later drawing calls.

fill rectangle `fillRect(x, y, width, height)` paints a filled rectangle into the canvas bitmap.

drawing order Later drawing calls appear on top of earlier pixels, so order is part of the rendered result.