Try this experiment
HTML5 + JAVASCRIPT / FROM YOUR FIRST PIXEL
Learn to draw.
Make the web move.
A beginner path through HTML canvas: create a surface, paint shapes, animate a scene, and respond to a pointer. Change real code and see what happens.
YOUR FIRST CANVAS DRAWING
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#246a73';
ctx.fillRect(40, 40, 180, 100);HTML creates the surface.
JavaScript paints the pixels.
Start here: Basic HTML and JavaScript help; the first lessons explain the setup. Examples run in a sandboxed browser preview. External resources are blocked. Stop preview ends animations, but an infinite loop can freeze the browser thread. This is a complete beginner learning path, not an exhaustive API reference.
Run the example to see your drawing.
Each run starts a fresh 600 × 360 canvas. Ctrl/⌘ + Enter runs your draft. Code execution is separate from the knowledge check.
CHANGE A VALUE. SEE THE RESULT.
Your shape control room
Move a rectangle and change its size, color and rotation. The canvas and generated code use the same settings. Coordinates refer to its center before rotation.
From a blank file to a useful project.
Complete HTML foundation
Save the following as index.html. Or use Download HTML in any lesson for a runnable page with that drawing. Essential descriptions and controls belong in HTML, outside the bitmap.
Keep your learning
Drafts, notes and passed knowledge checks save locally. A quiz pass is not a code assessment. Shape-explorer settings and previews are temporary. Export progress to move devices.
Common questions and real-project habits
Why is the drawing blurry or stretched?
Check bitmap width/height against CSS display size and devicePixelRatio. Preserve the aspect ratio. Size the bitmap for the display, set your logical transform, then redraw.
Why did resizing erase everything?
Changing bitmap dimensions clears pixels and resets context state. Store scene data separately and redraw after resizing; CSS layout alone is not the scene model.
Why does an image not draw or export?
Wait for the image to load or decode. Cross-origin images require appropriate server CORS permission to preserve an origin-clean canvas. A tainted canvas blocks pixel reads and exports. This lab uses local generated image sources and blocks remote requests.
How do I load an image in my own project?
const image = new Image(); image.src = 'picture.png'; await image.decode(); ctx.drawImage(image, 0, 0);
Run await inside an async function or module and catch loading failures. Set crossOrigin before src when your remote server supports CORS.
How do I export my drawing?
canvas.toBlob(blob => {
if (!blob) return;
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'drawing.png';
link.click();
setTimeout(() => URL.revokeObjectURL(url), 1000);
});The shape explorer has a working PNG export. Transparent pixels remain transparent in a PNG.
When should I use HTML or SVG instead?
Prefer native HTML for forms, readable text and ordinary controls. SVG is often useful for scalable diagrams with individually addressable shapes. Canvas suits pixel processing and scenes you redraw yourself. Pick based on interaction and accessibility needs, not novelty.
How can I keep animation smooth and usable?
Use requestAnimationFrame, elapsed time, and a pause control. Avoid unnecessary allocations and pixel reads. Cache repeated graphics when useful, cap resolution sensibly, and support reduced motion. Maintain a scene model so resizing and redraw are predictable.
Official reference: MDN Canvas tutorial.