Drawing Shapes On Canvas

Imagine you have a blank piece of paper and a set of pens ready to draw your first game. You need a way to tell the computer exactly where to place your shapes so the player can see them.

The Digital Canvas Coordinate System

To draw shapes on a computer screen, you must understand how the system maps out its space. Think of the screen as a giant grid where every single pixel has a specific address. In most programming environments, the top-left corner is the origin point with coordinates of zero and zero. As you move to the right, the horizontal number increases, while moving downward increases the vertical number. This grid system acts like a map for your game objects, ensuring that every rectangle or circle appears exactly where you want it to be. If you want to place an object in the middle of the screen, you simply calculate half of the total width and height values. Mastering this grid is the first step toward building any visual game because it provides the structure for all your future designs.

Key term: Canvas — a blank rectangular area on a webpage where you can draw graphics, text, or game elements using code.

Drawing on this digital surface is similar to managing a warehouse inventory system where every item needs a precise shelf location. If you tell the warehouse manager to place a box at location ten and twenty, they know exactly where to go. Similarly, when you provide coordinates to your code, the computer places your shape at that exact spot on the screen. If you provide the wrong address, your game object will appear in the wrong place, just like a lost package in a warehouse. You must always remember that the vertical axis grows as you go down, which feels backward compared to standard math graphs. Keeping this coordinate logic clear in your mind prevents common layout errors during your game development process.

Using Code to Render Shapes

Once you grasp the coordinate system, you can use specific commands to render visible shapes on your screen. Most drawing systems require you to define the shape type, its starting position, and its overall dimensions. You might write a command that specifies a rectangle by its top-left corner, its width, and its height. The computer reads these instructions and fills the pixels within those boundaries with the color you have chosen. This process happens very quickly, allowing you to draw many shapes in a single second.

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

The code above performs the following actions to render a simple blue box:

• The first line selects the specific canvas element from your webpage so the code knows where to draw.
• The second line creates a drawing context, which acts as the toolset for painting shapes onto the canvas.
• The third line sets the color property to blue, ensuring that every shape drawn afterward uses this specific shade.
• The final line draws the actual rectangle, placing it fifty pixels from the top and left edges of the screen.

By adjusting these numbers, you can move the rectangle around the screen or change its size to fit your game design. You are essentially building a visual language where numbers represent physical objects in your game world. As you experiment with different values, you will see how these coordinates directly change the layout of your game. This immediate feedback loop is the most effective way to learn how your code influences the player experience. You should try changing the numbers in your code to see how the rectangle shifts across the screen. Consistent practice with these simple commands will build the confidence you need for more complex game mechanics.

---

Understanding the coordinate grid allows you to place game objects accurately by mapping them to specific pixel addresses on the screen.

The next Station introduces the Game Loop function, which determines how these shapes move across your screen over time.