Table of Contents

9.7.4 Leash CodeHS: Complete Guide & Easy Solution

The 9.7.4 leash exercise is a CodeHS graphics assignment in which you draw a leash (a line) that connects two points on the screen, usually a circle and a moving object, so the line stretches and follows the mouse. It teaches coordinates, mouse events, timers, and the Line object. Once you understand how x and y positions update each frame, the exercise becomes straightforward.

If you are staring at a blank CodeHS editor wondering what on earth a “leash” has to do with learning JavaScript, you are not alone. This little exercise has confused thousands of beginners, and the search for answers spikes every single semester. The good news is that the concept behind it is simple. This guide breaks down exactly what the 9.7.4 leash exercise asks for, the ideas it teaches, the logic that solves it, and the mistakes almost everyone makes along the way.

What Is the 9.7.4 Leash Exercise?

CodeHS is an online platform used by schools to teach computer science, and one of its most popular courses is Introduction to Computer Science in JavaScript. Inside that course there is a unit called Animation and Games, which walks students through timers, mouse events, and drawing shapes on a graphics canvas.

Lesson 9.7 is about drawing lines. Students watch a video example, complete a short quiz, look at an example program, and then arrive at Exercise 9.7.4, simply called Leash. (In some course versions the same exercise is numbered 10.7.4, but the task is identical.) The numbering tells you it is the fourth exercise of the seventh lesson in unit nine.

The exercise asks you to create a small animated scene on the graphics canvas: one object stays or moves in response to the mouse, a second object follows it, and a line connects the two like a dog leash connecting a dog to a hand. As the mouse moves, the line redraws itself again and again, which makes it look like the leash stretches, swings, and follows naturally.

Sounds easy on paper. In practice, small errors in coordinates or event handling can make the line jump to strange positions, detach from its shapes, or refuse to move at all. That is why this exercise has a reputation for being harder than it looks.

What You Actually Build in This Exercise

Think of the scene like a real walk with a dog. There are three parts:

The leader: a shape (often a circle) that the user controls with the mouse. Move your mouse and the leader goes with it.
The follower: a second shape that chases the leader, usually moving in small steps instead of teleporting.
The leash: a line drawn from the leader to the follower, updated constantly so it always connects the two points.

Some versions of the exercise simplify this. Instead of a separate follower, the leash may connect the mouse cursor (or a “hand” circle) directly to a “dog” circle. The core idea is the same: a line whose endpoints update every moment so it behaves like a flexible leash.

The animation loop is what makes everything feel alive. A timer function runs many times per second, reads the current positions of both shapes, and redraws the line between them. When you move the mouse quickly, the leash stretches. When you slow down, the follower catches up and the leash shortens.

Key Concepts the 9.7.4 Leash Teaches

This exercise exists to teach four building blocks of graphics programming. Understanding each one makes the assignment far less painful.

1. The Coordinate System

CodeHS graphics uses a coordinate grid where the point (0, 0) sits at the top-left corner of the canvas. X values increase as you move right, and Y values increase as you move down. That last part trips up nearly every beginner. In math class, positive Y goes up. On a screen canvas, positive Y goes down. If your leash points in the opposite direction from where it should, the Y axis is the first suspect.

2. Mouse Events

A mouse event is a signal the program receives whenever the user moves or clicks the mouse. CodeHS lets you register a function that runs every time the mouse moves, and that function receives the mouse position through an event object. In the leash exercise, the leader shape listens for mouse movement and updates its position to the cursor location. Without a working mouse event handler, nothing in the scene responds to you.

3. Timers and the Animation Loop

A timer runs a chosen function over and over at a fixed interval. In this exercise, the timer is the heartbeat of the animation: each tick, it recalculates where the follower should be and redraws the leash line between the two shapes. Many students try to draw the line once and wonder why it never moves. The answer is almost always that the drawing needs to happen inside the timer function, not outside it.

4. The Line Object

In CodeHS graphics, a line is an object with two endpoints, typically created with the X and Y coordinates of both ends. You add it to the canvas like any other shape. The trick is that a line drawn once stays put. To make a leash, you either update the line’s endpoints each timer tick or remove the old line and draw a fresh one. Both approaches work, and both appear in student solutions across the internet.

How to Solve 9.7.4 Leash: Step-by-Step Logic

Below is the general logic most working solutions follow. This is a conceptual roadmap, not a copy-paste answer, because writing it yourself is how you actually learn the material (and how you pass the autograder, which tends to check behavior rather than exact code).

Step 1: Set Up the Canvas

Start with a clear canvas. Decide on the size and keep it in mind, because every coordinate you use must land inside it. If a shape disappears off the edge, check that its X and Y values are within the canvas width and height.

Step 2: Create the Two Shapes

Create the leader (the shape the mouse will drag around) and the follower (the shape that chases it). Give them different colors so you can tell them apart while testing. Place them at sensible starting positions, for example one third and two thirds of the way across the canvas.

Step 3: Connect a Line Between Them

Create a line object whose endpoints are the centers of the two shapes. Center coordinates matter: using a shape’s top-left corner instead of its center makes the leash attach at an odd angle, a classic beginner bug.

Step 4: Make the Leader Follow the Mouse

Register a mouse-move event handler. Every time the mouse moves, update the leader’s position to the new cursor coordinates. Test this part alone before adding anything else. If the leader does not track your cursor smoothly, the leash logic cannot work either.

Step 5: Make the Follower Chase the Leader

Inside the timer function, move the follower a small amount toward the leader’s current position. A common approach is to compare X coordinates: if the follower is left of the leader, add a small number to its X; if it is right of the leader, subtract a small number. Do the same for Y. Small step sizes (a few pixels per tick) create smooth motion. Large steps make the follower jump.

Step 6: Redraw the Leash Every Tick

In the same timer function, update the line so its endpoints match the current centers of both shapes. Remove the old line and draw a new one, or update the existing line’s endpoint positions, depending on which style you chose. Start the timer and watch the scene come alive.

If every step works, you will see exactly what the exercise wants: a leader you steer with the mouse, a follower trailing behind it, and a line connecting the two that stretches and relaxes like a real leash.

Example Code Structure (Conceptual)

To make the logic concrete, here is the shape of a typical solution written in CodeHS-style JavaScript. Treat it as a study guide that shows the pieces and their order, and write your own version in the editor.

// 1. Create shapes
var leader = new Circle(20);
leader.setPosition(100, 100);
add(leader);

var follower = new Circle(20);
follower.setPosition(200, 200);
add(follower);

// 2. Create the leash line
var leash = new Line(100, 100, 200, 200);
add(leash);

// 3. Leader follows the mouse
function drag(e) {
    leader.setPosition(e.getX(), e.getY());
}
mouseMoveMethod(drag);

// 4. Timer: move follower toward leader, redraw leash
function tick() {
    // move follower a few pixels closer
    // remove old leash and draw a new one between centers
}
setTimer(tick, 20);

Notice how the timer function is the center of gravity. All the interesting work, the chasing and the redrawing, lives there. When students get stuck, the single most useful debugging question is: “Is my update code actually inside the function that the timer calls?”

Common Mistakes and How to Fix Them

This section answers the problems students hit most often, in the same question-and-answer style search engines show for “people also ask” queries.

Why does my leash detach from the shapes?

The line is being drawn from stale coordinates instead of the shapes’ current positions. Every timer tick, read each shape’s current X and Y (or center) and rebuild the line from those values. If you reuse the starting coordinates, the line stays where it was first drawn while the shapes wander away.

Why does the line point the wrong way?

You are likely mixing up the Y axis direction. Remember that in the CodeHS canvas, positive Y goes downward. If your leash mirrors across a horizontal axis or the follower moves opposite to expectations, review every place where you add to or subtract from Y values.

Why is nothing moving at all?

The timer probably never started, or the mouse handler was never registered. Double check that setTimer is actually called and that mouseMoveMethod (or your course’s equivalent) receives your handler function. A function that is defined but never connected to an event or timer is the most common silent bug in this exercise.

Why does the follower teleport instead of gliding?

The follower is jumping straight to the leader’s position instead of moving in small steps. Replace the instant assignment with incremental movement: change the follower’s X and Y by only a few pixels per tick toward the leader. Smaller steps look smoother but take longer to catch up, so experiment with the step size.

Why do I see dozens of overlapping lines?

Old lines are piling up because they are never removed. Each tick draws a new line, so if you do not remove the previous one (or update a single line’s endpoints), the canvas fills with ghost lines. Either call remove on the old line before drawing the new one, or keep one line object and change its endpoints.

Why does the leash connect at the corner of the shape?

The line endpoints use the shape’s top-left corner instead of its center. Many CodeHS shapes store position as the top-left corner of their bounding box. Add half the width and half the height (for a circle, add the radius) to get the center, and anchor the line there.

Questions Students Ask About 9.7.4 Leash

These are the follow-up questions that come up again and again in classrooms and study forums.

Is 9.7.4 leash hard?

It feels hard because it combines several new ideas at once, but each idea is simple on its own. Students who struggled with mouse events find it easier, because the exercise forces mouse handling, timers, and coordinate math to work together. Breaking it into the six steps above makes it manageable.

Can I pass without using a timer?

Probably not, because the exercise is specifically about animation. The whole point of the Animation and Games unit is learning to update the screen repeatedly. Drawing the line once shows you understand shapes; updating it with a timer shows you understand animation, which is what the autograder checks.

Does the leash have to be a fixed length?

No, and in most student solutions the leash stretches naturally. The exercise only requires the line to connect the two shapes. Advanced students sometimes add a maximum leash length so the follower gets pulled along, but that is an extra challenge, not a requirement.

What if my course numbers it 10.7.4 instead of 9.7.4?

It is the same exercise; only the course outline changed. CodeHS updates its course versions (often named things like Golden or Bulldog) and unit numbers shift between versions. The task, the concepts, and the solution logic are identical.

Should I copy a solution from the internet?

Copying teaches you nothing and risks an academic integrity violation. The smarter move is to read explanations, understand the logic, and then write your own version. Students who do that consistently say the next exercises (like the Breakout project later in the unit) feel far easier.

Why This Exercise Matters Beyond the Grade

It is easy to dismiss the leash as a toy problem, but the pattern it teaches shows up everywhere in real software. Any time one thing on a screen must track another, a cursor, a game character, a data point on a chart, or a connector in a diagram tool, the same loop applies: read positions, compute a small update, redraw.

Game developers use exactly this logic for enemy AI that chases a player. UI designers use it for drag handles and rubber-band selection boxes. Even data visualization tools redraw connector lines between moving elements using the same timer-driven approach you practice here.

Students who go on to publish their own projects also learn a second lesson: shipping something means making it findable and measurable. When you put a portfolio site online to show off your CodeHS projects, you can check SEO ranking to see how it appears in search results, run an SEO score check to spot basic on-page issues, and use a domain age check when choosing a domain name for it. Understanding how domain age affects SEO helps you pick a domain you can grow with, and a free domain age checker gives you that data in seconds. None of that is part of the exercise, but it is the real-world packaging around the coding skill.

Debugging Checklist: Before You Ask for Help

Run through this list whenever the leash misbehaves. Most student bugs are caught by one of these checks:

Canvas bounds: Are all coordinates inside the canvas? Shapes outside the visible area look like missing code.
Mouse handler: Is the mouse-move function registered? Add a print statement inside it to confirm it fires.
Timer running: Is setTimer called with the right function and interval? Print inside the tick function to verify.
Line updates: Does the line redraw inside the timer tick, using current shape positions?
Old lines removed: If you draw a new line each tick, is the old one removed first?
Center vs corner: Are line endpoints anchored at shape centers, not top-left corners?
Y direction: Do your Y calculations respect that positive Y goes downward?
Step size: Is the follower’s per-tick movement small enough to look smooth?

FAQs About 9.7.4 Leash CodeHS

What is 9.7.4 leash in CodeHS?

It is a graphics exercise where you draw a line (a leash) connecting two shapes while one follows the mouse. It sits in the Drawing Lines lesson of the Animation and Games unit in the Introduction to Computer Science in JavaScript course, and it tests your grasp of coordinates, mouse events, timers, and line objects.

What does the 9.7.4 leash exercise ask you to do?

You create a leader shape controlled by the mouse, a follower shape that chases it, and a line between them that updates continuously. The result looks like a leash stretching and relaxing as the two shapes move around the canvas.

Which programming language does 9.7.4 leash use?

JavaScript, using the CodeHS graphics library. You work with objects like Circle and Line, event functions like mouseMoveMethod, and animation helpers like setTimer, all inside the CodeHS editor.

What concepts do I need to know before attempting 9.7.4 leash?

Coordinates, mouse events, timers, and the Line object. The earlier lessons in the unit (9.1 through 9.6) cover each of these, so if the leash feels impossible, revisit the Moving Ball example and the mouse events videos first.

How does the follower move toward the leader?

By taking small steps: each timer tick, compare the follower’s X and Y to the leader’s and nudge them closer by a few pixels. This incremental approach creates smooth trailing motion instead of instant teleporting.

Why is my leash line not moving?

Because the line is drawn once outside the timer instead of being redrawn every tick. Move the line-drawing code inside the function your timer calls, so it rebuilds from the shapes’ current positions on every frame.

Why does the line attach to the wrong spot on the circle?

You are probably using the circle’s corner position instead of its center. Add the radius to the X and Y values to find the true center, and anchor both line endpoints there.

How do mouse events work in the 9.7.4 leash exercise?

You register a handler function that CodeHS calls every time the mouse moves, and the handler receives the cursor’s coordinates. Inside the handler you set the leader’s position to those coordinates, which makes the shape track the cursor.

What is the role of the timer in 9.7.4 leash?

The timer drives the animation loop: it repeatedly moves the follower and redraws the leash. Without it, the scene would be a static picture. Typical intervals are tens of milliseconds, giving smooth motion without overloading the browser.

Is 9.7.4 the same as 10.7.4 leash?

Yes, the numbering differs between CodeHS course versions but the exercise is identical. If your outline says 10.7.4, follow this same guide; the task and solution logic do not change.

Can I use the leash logic in my own games?

Absolutely, the chase-and-redraw pattern is the foundation of simple game AI. Enemies that follow the player, pets that trail a character, and grappling-hook mechanics all reuse the same loop of reading positions, stepping closer, and redrawing connectors.

What should I learn after finishing 9.7.4 leash?

Keyboard events and collision detection, which the next lessons cover. Those skills lead directly into the Breakout project at the end of the unit, where everything you practiced with the leash, animation loops, moving objects, and screen coordinates, comes together.

Conclusion

The 9.7.4 leash exercise looks intimidating because it asks several new skills to cooperate: mouse tracking, timed animation, coordinate math, and live line drawing. Taken one step at a time, though, it is a friendly introduction to how interactive graphics actually work. Build the two shapes, wire up the mouse, let a timer do the chasing and redrawing, and debug with the checklist above. You will not only pass the exercise, you will understand the animation loop pattern that powers games, data visualizations, and interactive web pages. For background on the broader ideas behind computer-drawn graphics and animation, the Wikipedia article on computer animation is a solid next read. Now open the editor, move that mouse, and watch your leash come to life.