By Oscar Woods 
Every semester, thousands of students hit a wall at the same spot in their CodeHS JavaScript course. The exercise is called 9.7.4 Leash. It sounds simple. A yellow ball follows your mouse. A line connects that ball to the center of the screen. Five points on the board. Should take twenty minutes.
It rarely does.
Table of Contents
What Is the 9.7.4 Leash Exercise?
9.7.4 Leash sits inside Unit 9 of CodeHS’s Introduction to Computer Science in JavaScript curriculum, specifically within the Drawing Lines section (9.7). The sequence runs like this:
- 9.7.1 — Video: Drawing Lines
- 9.7.2 — Drawing Lines Quiz
- 9.7.3 — Example: Drawing Lines
- 9.7.4 — Exercise: Leash (5 points)
- 9.7.5 — Advanced Animator Badge
The task itself: build a program where a circle sits on the canvas, a line connects it to the screen’s center, and when the mouse moves, both the ball and the line update to follow it. Like a dog on a leash, one end fixed, the other always moving with the user.
That visual is the whole point. The “dog” is the ball. The fixed post is the canvas center. The leash is the line.
Why Students Get Stuck
Here is what actually happens when students open 9.7.4 Leash for the first time.
They write the basic setup. Ball appears. Line appears. Then they move the mouse and one of three things goes wrong:
The line multiplies across the screen. Each mouse movement adds a new line without removing the old one. Within seconds, the canvas fills with overlapping lines. This happens because a new line object gets created inside the mouse event function on every call, and the old ones never get cleared.
The ball moves but the line stays frozen. Or the line stretches but the ball never shifts. Both objects must update together inside the same mouse event handler. If they are split across different functions or only one is inside the event, they fall out of sync.
Everything flickers. Removing and re-adding objects on every frame works in theory. In practice, the browser cannot redraw fast enough and the user sees constant blinking.
The underlying issue in almost every case comes down to two things: variable scope and object lifecycle management.
The Concept Behind the Code
This exercise is not really about drawing a line. It is about event-driven programming, a pattern used across web development, game design, and mobile applications.
In most beginner programs, code runs top to bottom in a fixed sequence. Event-driven programs work differently. They wait. They listen for a user action (a mouse move, a key press, a click) and then execute a function in response.
In 9.7.4 Leash, mouseMoveMethod() is the event listener. It fires potentially 60 or more times per second as the user moves their mouse across the canvas. Each time it fires, the program needs to:
- Read the current mouse coordinates with
e.getX()ande.getY() - Move the ball to that position
- Update the line’s endpoint to match
For that to work, both the ball object and the line object must be accessible to the event function. That means they need to be declared globally, outside of any individual function.
The Variable Scope Problem
This is where most students get blocked.
Declaring variables with var inside the start() function creates local variables that the event handler cannot see. A variable declared inside start() belongs only to start() and is invisible to any other function in the program, including the mouse event handler.
Variables declared outside any function have global scope and can be accessed from anywhere in the program. Variables defined inside a function are only accessible within that function.
In practice, for 9.7.4 Leash, that means:
- Ball and line declared inside
start()→ event handler cannot find them → runtime error or nothing moves - Ball and line declared globally at the top → event handler can read and update them → program works
This is variable scope. Students run into it constantly in this exercise. Understanding it here makes Unit 10 and every multi-function program beyond it significantly easier to work through.
What the Correct Structure Looks Like
Without posting a copy-paste solution (which defeats the purpose of the exercise), the working structure follows this logic:
- Global declarations — ball and line objects sit at the top of the program, outside all functions
start()function — initializes both objects, sets their positions, adds them to the canvas, and registers the mouse event handler- Mouse event function — on every mouse movement, updates the ball’s position to match the cursor, then updates the line’s endpoint to the same coordinates, without creating new objects
The key to smooth animation is updating existing objects rather than removing and recreating them on each frame. The ball and line already exist on the canvas. Their positions just need to change.
For the line specifically, the setEndpoint(x2, y2) method repositions the end of an existing line without creating a new object. That is what keeps the canvas clean on every mouse movement.
Related Reading→ Luxury Villas Greece
Common Mistakes at a Glance
| Mistake | What Happens |
|---|---|
| Creating a new line inside the event handler | Canvas fills with hundreds of overlapping lines |
Declaring objects inside start() with var | Event handler cannot access them |
| Forgetting to update both objects together | Ball and line fall out of sync |
| Adding line after ball in render order | Line draws over the ball, hiding it |
Why This Matters Beyond the Assignment
The skills in 9.7.4 Leash show up everywhere once students move past this unit:
| Concept Learned | Where It Appears Later |
|---|---|
| Mouse event handling | Drag-and-drop interfaces, game controls |
| Global vs. local scope | All multi-function programs |
| Real-time coordinate tracking | Crosshair systems, cursor effects |
| Object position updates | Animation, game physics |
| Event-driven structure | Web apps, mobile UIs |
The Crazy Ball Game project that comes later in Unit 9 requires tracking multiple moving objects, handling collisions, and responding to both mouse and keyboard input simultaneously. Students who understood the leash exercise can work through it. Students who copied code without understanding why it works get stuck again at that stage.
For anyone who wants to go deeper on JavaScript scope beyond what the CodeHS curriculum covers, MDN’s reference on variable scope and declarations is the most thorough and reliable free resource on the subject.
The Bigger Picture
CodeHS built this exercise to sit at a specific moment in the curriculum. Students have already learned functions, variables, and control structures. The animation unit brings all of that together with graphics and user interaction.
9.7.4 Leash is where those pieces meet for the first time in a live, responsive program. The screen stops being static. Objects respond to the user in real time. That shift in thinking, from sequential code to reactive code, is what the exercise is actually teaching.
Getting the line to follow the mouse is just how the lesson is packaged.