130 Widgets

Semi-random thoughts and tales of tinkering

📚 All Lessons Lesson 2 →

Lesson 1: Hello, Canvas!

Every video game starts with a screen to draw on. In this lesson, you'll create your very first web page and learn to draw shapes on it — just like the blocks in Minecraft! 🎨

What is HTML?

HTML stands for HyperText Markup Language. It's the language used to create web pages — yes, the same kind of pages you visit every day in your browser!

An HTML file is just a text file with special tags that tell the browser what to show. Tags look like this: <tag>stuff inside</tag>

Think of HTML like a recipe. The tags are the instructions ("add a title", "put a picture here"), and the browser is the chef that follows them to build the page you see.

Your First Web Page

Here's the simplest web page you can make. It has just three parts:

<!DOCTYPE html>
<html>
  <head>
    <title>My Game</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

🏷️ Key Tags

  • <html> — Wraps everything on the page
  • <head> — Info about the page (like its title in the browser tab)
  • <body> — Everything you actually see on the page
  • <h1> — A big heading (like a chapter title)

The Canvas: Your Drawing Board

To make a game, we need something to draw on. HTML gives us a special tag called <canvas>. Think of it as a blank piece of paper that we can draw shapes, colors, and pictures on using code! 

<canvas id="game" width="600" height="400"></canvas>

This creates a drawing area that is 600 pixels wide and 400 pixels tall. The id="game" gives it a name so we can find it in our code.

A pixel is a tiny colored dot on your screen. Your screen has millions of them! A canvas that is 600×400 is made up of 240,000 tiny dots we can color in.

Drawing with JavaScript

HTML creates the canvas, but we need JavaScript to actually draw on it. JavaScript is a programming language that makes web pages interactive — it's the language that powers almost every game you play in a browser!

We write JavaScript inside a <script> tag. Here's how we draw our first rectangle: 

<script>
  // Step 1: Find our canvas on the page
  const canvas = document.getElementById('game');

  // Step 2: Get the "drawing tools" (called the context)
  const ctx = canvas.getContext('2d');

  // Step 3: Pick a color
  ctx.fillStyle = '#5cb85c';  // A nice green color

  // Step 4: Draw a filled rectangle!
  // fillRect(x, y, width, height)
  ctx.fillRect(50, 50, 200, 100);
</script>

📐 Understanding fillRect(x, y, width, height)

  • x — How far from the left edge to start (in pixels)
  • y — How far from the top edge to start (in pixels)
  • width — How wide the rectangle is
  • height — How tall the rectangle is

Important: On a canvas, the position (0, 0) is the top-left corner, not the bottom-left! The y-axis goes down, not up. This is different from math class!

See It In Action!

Here's what our code draws — a green rectangle on a dark background:

A green rectangle at position (50, 50)

Let's Draw a Scene!

We can draw multiple rectangles with different colors to make a simple scene. Let's make a sky, some ground, and a sun: 

// Sky (fill the whole canvas with light blue)
ctx.fillStyle = '#87ceeb';
ctx.fillRect(0, 0, 600, 400);

// Ground (green along the bottom)
ctx.fillStyle = '#5cb85c';
ctx.fillRect(0, 300, 600, 100);

// Dirt (brown under the grass)
ctx.fillStyle = '#8b6914';
ctx.fillRect(0, 320, 600, 80);

// Sun (yellow square in the sky)
ctx.fillStyle = '#ffdd00';
ctx.fillRect(500, 40, 60, 60);

A simple scene made entirely from rectangles!

🎨 Color Codes: Colors like '#87ceeb' are called hex colors. The 6 characters after the # represent how much Red, Green, and Blue to mix together. You can also use color names like 'red', 'blue', or 'green'!

The Complete Code

Here's the full HTML file that creates our scene. You can copy this into a text file, save it as game.html, and open it in your browser!

<!DOCTYPE html>
<html>
<head>
  <title>My First Canvas</title>
</head>
<body style="background: #222; margin: 0;">
  <canvas id="game" width="600" height="400"></canvas>

  <script>
    const canvas = document.getElementById('game');
    const ctx = canvas.getContext('2d');

    // Sky
    ctx.fillStyle = '#87ceeb';
    ctx.fillRect(0, 0, 600, 400);

    // Ground
    ctx.fillStyle = '#5cb85c';
    ctx.fillRect(0, 300, 600, 100);

    // Dirt
    ctx.fillStyle = '#8b6914';
    ctx.fillRect(0, 320, 600, 80);

    // Sun
    ctx.fillStyle = '#ffdd00';
    ctx.fillRect(500, 40, 60, 60);
  </script>
</body>
</html>

🏆 Challenges — Try These!

  • Change the sky color to something different — try '#ff6b6b' for a sunset!
  • Add more rectangles to make clouds (white rectangles in the sky)
  • Draw a brown rectangle for a tree trunk, and a green one for leaves on top of it
  • Try making the ground higher or lower by changing the y position
  • Can you figure out how to draw a simple house? (hint: you'll need a rectangle for the walls and a smaller one for the door)

📝 What We Learned

  • HTML uses tags to structure a web page
  • The <canvas> tag gives us a drawing area
  • JavaScript code goes inside <script> tags
  • We use ctx.fillStyle to pick a color
  • We use ctx.fillRect(x, y, width, height) to draw rectangles
  • Position (0,0) is the top-left corner; y goes down
📚 All Lessons Lesson 2: Colors & Shapes →