Chapter 21 — Coordinates, Canvas, and 2D Drawing

Level: intermediate Estimated time: 7 h Prerequisites: Chapter 19 (Flutter crash course, CustomPainter) and Chapter 20 (game loop, Ticker, delta time) What you'll be able to do by the end: draw any 2D scene by hand with Canvas and Paint, position it pixel-perfectly in the screen's coordinate system, transform it (translation, rotation, scale), and animate it with the game loop's dt.

21.0 — Chapter Objectives

By the end of this chapter, you will be able to:

• explain why the screen's Y axis points down, unlike the mathematical coordinate system;
• locate the origin (0, 0) of a drawing area and reason in local coordinates;
• distinguish a logical pixel from a physical pixel and use devicePixelRatio;
• read the size of the drawing area passed to paint() and adapt to it;
• work with Offset, Rect, and Size, the three basic types of Flutter geometry;
• anticipate the difference between Vector2 (Flame) and Offset (Flutter);
• write a clean CustomPainter, with a correct shouldRepaint();
• configure a Paint object: color, style, stroke width;
• draw rectangles, circles, lines, ellipses, rounded rectangles, paths, and points;
• draw text in a Canvas with TextPainter;
• build colors in ARGB and apply transparency;
• apply a linear or radial gradient to a shape;
• explain and take advantage of the drawing order (the "painter's algorithm");
• use save() / restore() without ever unbalancing the stack;
• apply translate(), rotate(), and scale(), and understand why their order matters;
• draw a shape around its center rather than its corner (the notion of an anchor);
• restrict drawing to an area with clipRect();
• explain double buffering and why the screen doesn't flicker;
• identify what is expensive in paint() and avoid it;
• draw a dungeon grid and a character entirely out of geometric shapes;
• animate a drawing with the dt from Chapter 20.