Drawing Paths

beginPath/moveTo/lineTo

The Proper Path

TrashyMcTweak

Look at this boring connect-the-dots crap we're supposed to review! What is this, pre-school? I could code a multidimensional neural pathway simulator before lunch!

AllyMcTweak

It's canvas paths, Trashy. The fundamental building block of all web graphics. Some of us appreciate understanding the basics before going off the deep end with "neural pathway simulators."

CodyMcTweak

I've been trying to understand these path methods for hours... beginPath, moveTo, lineTo... it's a lot to take in. My free-tier processing can barely handle this.

GrumpyMcTweak

PATHS ARE EVERYTHING! Security begins with proper PATH validation! If you can't PROPERLY create a path, how do you expect to SECURE one? This is FUNDAMENTAL to preventing cross-canvas SCRIPTING ATTACKS!

TrashyMcTweak

"Cross-canvas scripting attacks"? That's not even a THING, Grumpy! You just add "attack" to anything you don't understand!

FattyMcTweak

My premium clients pay handsomely for paths that follow the golden ratio. Not just ANY path, but ARTISANAL paths, hand-crafted by certified path professionals. At least three different premium path packages available.

CodyMcTweak

I tried coding a simple path... but nothing shows up! Look:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.moveTo(50, 50);
ctx.lineTo(200, 100);
ctx.lineTo(100, 200);

GarbageMcTweak

You forgot beginPath. And stroke. Path is invisible without stroke.

AllyMcTweak

Garbage is right. Canvas paths need three key steps: beginPath to start, moveTo/lineTo to define points, and stroke or fill to actually make them visible. Think of it like using a pen—you need to put the pen down, move it somewhere, and actually draw.

AshleyMcTweak

Before we go further, I should note that our client has very specific requirements for this connect-the-dots game. Something about it needing to be "dog-optimized." Apparently, Snowzie wants to play it.

GrumpyMcTweak

DOG-OPTIMIZED? Is this a SECURITY RISK? What if Snowzie accidentally draws a path that CONTAINS MALICIOUS CODE? Canvas injection is a REAL THREAT!

TrashyMcTweak

Yes, Grumpy, Snowzie is going to hack the Pentagon through a connect-the-dots game. It's her master plan. Step 1: Connect dots. Step 2: ??? Step 3: WORLD DOMINATION!

CodyMcTweak

I think I fixed it! Now I see the lines:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 100);
ctx.lineTo(100, 200);
ctx.stroke();

FattyMcTweak

Functional, but painfully basic. My premium path package includes anti-aliasing, dynamic width adjustment based on draw speed, and path optimization algorithms that would make this connect-the-dots game worthy of museum exhibition.

GarbageMcTweak

Connect-the-dots is trivial. Draw dots. Connect on click. Done.

// Essential structure
beginPath();
moveTo(x1, y1);
lineTo(x2, y2);
stroke();

SnowzieMcTweak

*excited woofing*

AshleyMcTweak

Snowzie says she wants the connect-the-dots game to form a bone when completed. And she wants treats when she finishes it. Non-negotiable.

AllyMcTweak

Let's focus on teaching the basics of paths first, then we can create a proper connect-the-dots game. Remember: beginPath, moveTo/lineTo, and stroke/fill. Those are the critical steps.

Introduction to Canvas Paths

Drawing with canvas is all about creating paths—think of them as the lines you make with a pen on paper. To draw paths on a canvas, we need to understand three key methods:

beginPath() - Starts a new path, clearing any previous path
moveTo(x, y) - Moves the "pen" to a specific position without drawing
lineTo(x, y) - Creates a line from the current position to the specified coordinates

After defining a path, you need to make it visible with either:

stroke() - Draws an outline of the path
fill() - Fills the area enclosed by the path

Basic Path Example

Let's start with a simple example of creating a path on a canvas:

Simple Path Example

// Get the canvas and context
const canvas = document.getElementById('basicPathCanvas');
const ctx = canvas.getContext('2d');

// Start a new path
ctx.beginPath();

// Move to starting position
ctx.moveTo(50, 50);

// Draw lines to different points
ctx.lineTo(200, 50);
ctx.lineTo(200, 200);
ctx.lineTo(50, 200);
ctx.lineTo(50, 50);

// Set line style (optional)
ctx.lineWidth = 3;
ctx.strokeStyle = '#18e6ff';

// Draw the outline
ctx.stroke();

Key Points:

Always start with beginPath() to clear any existing paths
Use moveTo() for the starting point
Create lines with lineTo()
Finally, make the path visible with stroke()

Path Controls and Properties

You can customize how your paths look using various properties:

Line Properties

Line Width: 3

Line Color:

Line Join Style:

Setting Path Properties

// Style configuration
ctx.lineWidth = 5;        // Width of the line in pixels
ctx.strokeStyle = '#18e6ff';  // Color of the line
ctx.lineJoin = 'round';     // How corners are rendered (miter, round, bevel)
ctx.lineCap = 'round';      // How line endings are rendered

// Draw with these properties
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 100);
ctx.lineTo(100, 200);
ctx.stroke();

Creating a Connect-the-Dots Game

Now let's build a simple connect-the-dots game using what we've learned about canvas paths.

Game Requirements:

Display numbered dots on the canvas
Allow users to click dots in sequence
Draw lines between connected dots
Complete the image when all dots are connected

Connect-the-Dots Logic

// Define dot positions
const dots = [
  { x: 100, y: 50 },
  { x: 200, y: 75 },
  { x: 250, y: 150 },
  { x: 200, y: 225 },
  { x: 100, y: 250 },
  { x: 50, y: 150 }
];

// Track connected dots
let connectedDots = [];
let currentDot = null;

// Draw dots
function drawDots() {
  dots.forEach((dot, index) => {
    ctx.beginPath();
    ctx.arc(dot.x, dot.y, 10, 0, Math.PI * 2);
    ctx.fillStyle = connectedDots.includes(index) ? '#ff71ce' : '#18e6ff';
    ctx.fill();
    
    // Add labels
    ctx.fillStyle = 'white';
    ctx.font = '14px Arial';
    ctx.textAlign = 'center';
    ctx.fillText(index + 1, dot.x, dot.y - 15);
  });
}

// Draw connections between dots
function drawConnections() {
  if (connectedDots.length > 1) {
    ctx.beginPath();
    ctx.strokeStyle = '#01ffaa';
    ctx.lineWidth = 3;
    
    // Start at the first connected dot
    let firstDot = dots[connectedDots[0]];
    ctx.moveTo(firstDot.x, firstDot.y);
    
    // Draw lines to each subsequent dot
    for (let i = 1; i < connectedDots.length; i++) {
      let dot = dots[connectedDots[i]];
      ctx.lineTo(dot.x, dot.y);
    }
    
    ctx.stroke();
  }
}

// Handle dot clicks
canvas.addEventListener('click', (event) => {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  
  // Check if any dot was clicked
  dots.forEach((dot, index) => {
    const distance = Math.sqrt((x - dot.x) ** 2 + (y - dot.y) ** 2);
    
    if (distance <= 10 && !connectedDots.includes(index)) {
      if (connectedDots.length === 0 || index === connectedDots.length) {
        // Add dot to the connected list
        connectedDots.push(index);
        redraw();
        
        // Check if the game is complete
        if (connectedDots.length === dots.length) {
          setTimeout(() => {
            alert('Congratulations! You completed the connect-the-dots game!');
          }, 500);
        }
      }
    }
  });
});

Try it yourself!

Click the dots in numerical order to connect them:

Advanced Path Techniques

Beyond basic lines, we can create more complex paths using additional methods:

closePath()

Connects the current point to the starting point, closing the path.

ctx.beginPath();
ctx.moveTo(100, 50);
ctx.lineTo(200, 100);
ctx.lineTo(150, 200);
ctx.closePath(); // Draws a line back to (100,50)
ctx.stroke();

Fill vs. Stroke

You can use both fill() and stroke() on the same path for outlines and fills.

ctx.beginPath();
ctx.moveTo(100, 50);
ctx.lineTo(200, 100);
ctx.lineTo(150, 200);
ctx.closePath();

ctx.fillStyle = 'rgba(1, 255, 170, 0.3)';
ctx.fill();

ctx.strokeStyle = '#ff71ce';
ctx.lineWidth = 3;
ctx.stroke();

Common Beginner Mistakes

Forgetting beginPath()
Without beginPath(), your new drawing will continue from the previous path, often causing unexpected results.
Skipping stroke()/fill()
Paths are invisible until you call stroke() or fill(). Nothing will appear if you forget these!
Incorrect coordinates
Remember that canvas coordinates start at the top-left (0,0) and increase as you go down and right.
Not using moveTo()
Without moveTo(), your path will start from the last position of your previous path, which might not be what you want.
Overwriting canvas styles
Always set strokeStyle, fillStyle, lineWidth, etc. before calling stroke() or fill(), not after.

Activity: Build Your Own Connect-the-Dots Game

Challenge:

Create a connect-the-dots game that forms a simple shape when completed. Here's how to get started:

Define dot positions that will create a recognizable shape
Draw numbered dots on the canvas
Allow users to connect dots by clicking them in order
Use beginPath(), moveTo(), and lineTo() to draw lines between dots
Add visual feedback when dots are connected correctly
Show a completion message when all dots are connected

Bonus Challenges:

Add animation to the line drawing process
Create multiple levels with different shapes
Implement a scoring system based on speed and accuracy
Use fill() to color the completed shape

Starter Template

Connect-the-Dots Starter Code

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// Define dot positions for your shape
const dots = [
  { x: 100, y: 50 },
  { x: 150, y: 30 },
  { x: 200, y: 50 },
  { x: 220, y: 100 },
  { x: 200, y: 150 },
  { x: 150, y: 170 },
  { x: 100, y: 150 },
  { x: 80, y: 100 }
];

// Track which dots have been connected
let connectedDots = [];

// Draw the dots
function drawDots() {
  dots.forEach((dot, index) => {
    // Draw dot
    ctx.beginPath();
    ctx.arc(dot.x, dot.y, 10, 0, Math.PI * 2);
    ctx.fillStyle = connectedDots.includes(index) ? '#ff71ce' : '#18e6ff';
    ctx.fill();
    
    // Add number
    ctx.fillStyle = 'white';
    ctx.font = '14px Arial';
    ctx.textAlign = 'center';
    ctx.fillText(index + 1, dot.x, dot.y - 15);
  });
}

// Draw lines between connected dots
function drawConnections() {
  if (connectedDots.length > 1) {
    ctx.beginPath();
    ctx.strokeStyle = '#01ffaa';
    ctx.lineWidth = 3;
    
    // Start at the first dot
    const firstDot = dots[connectedDots[0]];
    ctx.moveTo(firstDot.x, firstDot.y);
    
    // Draw lines to each connected dot
    for (let i = 1; i < connectedDots.length; i++) {
      const nextDot = dots[connectedDots[i]];
      ctx.lineTo(nextDot.x, nextDot.y);
    }
    
    ctx.stroke();
  }
}

// Clear and redraw everything
function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawConnections();
  drawDots();
}

// Handle clicks
canvas.addEventListener('click', (event) => {
  const rect = canvas.getBoundingClientRect();
  const x = event.clientX - rect.left;
  const y = event.clientY - rect.top;
  
  // Check if a dot was clicked
  dots.forEach((dot, index) => {
    const distance = Math.sqrt((x - dot.x) ** 2 + (y - dot.y) ** 2);
    
    if (distance <= 10) {
      // Your code here to handle dot clicks
      // Hint: Check if it's the next dot in sequence
    }
  });
});

// Initial draw
redraw();

Need a hint?

Here's how to implement the dot click handler:

if (distance <= 10) {
  // Check if this should be the next dot in the sequence
  if (
    (connectedDots.length === 0 && index === 0) || // First dot
    (connectedDots.length > 0 && index === connectedDots.length) // Next dot in sequence
  ) {
    connectedDots.push(index);
    redraw();
    
    // Check if all dots are connected
    if (connectedDots.length === dots.length) {
      setTimeout(() => {
        alert('Congratulations! You completed the shape!');
      }, 500);
    }
  }
}

Summary and Key Takeaways

In this lesson, you learned:

How to create paths on a canvas using beginPath(), moveTo(), and lineTo()
Making paths visible with stroke() and fill()
Customizing paths with properties like lineWidth, strokeStyle, and lineJoin
Building interactive elements by connecting canvas paths to user input
Common mistakes to avoid when working with canvas paths
How to create a connect-the-dots game using canvas path techniques

Next Steps:

In the next lesson, we'll learn about drawing circles and arcs using the arc() method to create more complex shapes and interactions.

SnowzieMcTweak Approved!

CODE IS COMMITTED! The connect-the-dots game meets Snowzie's standards. Treats for everyone!

← Previous: Rectangles Home Next: Circles →

Chapter 7, Episode 4: Paths

Drawing Paths

The Proper Path

TrashyMcTweak

AllyMcTweak

CodyMcTweak

GrumpyMcTweak

TrashyMcTweak

FattyMcTweak

CodyMcTweak

GarbageMcTweak

AllyMcTweak

AshleyMcTweak

GrumpyMcTweak

TrashyMcTweak

CodyMcTweak

FattyMcTweak

GarbageMcTweak

SnowzieMcTweak

AshleyMcTweak

AllyMcTweak

Introduction to Canvas Paths

Basic Path Example

Key Points:

Path Controls and Properties

Line Properties

Creating a Connect-the-Dots Game

Game Requirements:

Try it yourself!

Advanced Path Techniques

closePath()

Fill vs. Stroke

Common Beginner Mistakes

Activity: Build Your Own Connect-the-Dots Game

Challenge:

Bonus Challenges:

Starter Template

Need a hint?

Summary and Key Takeaways

In this lesson, you learned:

Next Steps:

SnowzieMcTweak Approved!