HTML5 Canvas for Flash developers: the starting point

Canvas is a bitmap drawing surface exposed through JavaScript. Calling a drawing method changes pixels; it does not create a persistent display object that remembers its position. This is the key shift for developers used to a display list.

Keep objects in your own model and redraw them when the scene changes. The element’s width and height set the drawing buffer, while CSS controls its display size. Treat those sizes deliberately to avoid blurry scaling.

Start with a rectangle and a single moving object. Once the update and render responsibilities are clear, add images, input, audio and collision. Put a readable fallback description inside the canvas element.

Try the idea

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#ff6b35";
ctx.fillRect(24, 24, 80, 40);