Stuck on 9.7.4 Leash? Here’s the logic, the code, and why yours might be failing.
If you searched for 9.7 4 leash and landed here, you’re probably looking at a ball that won’t move, a line that stays put, or an autograder that says no. All three are fixable, and usually the fix is one line.
This page works in the order a stuck student actually needs: a hint first, then the plan, then a full solution you can compare against, then a troubleshooting section for when things still don’t work.
Quick overview of 9.7.4 Leash
9.7.4 Leash is a CodeHS JavaScript graphics exercise from the Drawing Lines lesson. You draw a ball and a line. One end of the line stays at the center of the canvas, the other end sticks to the ball, and the ball follows your mouse.
Picture a dog on a leash while you stand still. You’re the fixed point, the dog is the ball, and the leash stretches wherever the dog goes.
One honest caveat. CodeHS numbers lessons differently across course versions, so your copy of 9.7.4 Leash might differ in small ways: ball color, radius, or required function names. Your own instructions always win over anything on this page.
What the exercise is really testing
The program is short, but it checks three ideas at once.
Mouse events. Your code has to react when the mouse moves, not run once and stop.
Updating objects instead of recreating them. You create the ball and line one time, then change their positions.
Variable scope. The setup function and the mouse function both need to reach the same ball and line.
Most students who get stuck on 9.7.4 Leash understand the first idea and trip on the third.
Concepts you need first
You don’t need much, but these have to be solid.
A canvas uses X and Y coordinates. The origin (0, 0) is the top-left corner. X grows to the right, and Y grows downward, which feels backwards if you’re used to math class graphs.
A Line has two endpoints, each with its own X and Y. A Circle has a position and a radius.
A callback is a function you hand to CodeHS so it can call it later. Here, you hand over a function and CodeHS runs it every time the mouse moves.
Plan the logic before you write code
Try this on paper first. Honestly, the students who skip this step are the ones who end up pasting code they can’t explain.
Setup happens once: find the center, create a line that starts and ends at the center, create the ball at the center, add both to the canvas, and register the mouse handler.
Movement happens many times: read the mouse X and Y, move the ball there, move the line’s end there.
That’s the entire program. If you can say it in those two sentences, you can write it.
Hint before the solution: the line needs two things done to it, and only one of them ever changes. Which endpoint stays fixed? Write that down, then try the exercise yourself for ten minutes before reading on.
Step-by-step solution
Step 1: Declare shared variables outside the functions
var BALL_RADIUS = 30; // check your instructions for the required radius
var ball;
var line;ball and line live outside every function on purpose. That makes them reachable from both start() and the mouse handler.
Here’s a scene I’ve seen more than once. A student writes var ball = new Circle(30); inside start(). The ball shows up, everything looks fine, and then the mouse handler throws ball is not defined. Inside start(), that var created a private copy the handler can’t see.
Step 2: Find the center of the canvas
var centerX = getWidth() / 2;
var centerY = getHeight() / 2;getWidth() and getHeight() return the canvas size. Half of each is the center. Using these instead of typed-in numbers means the program still works if the canvas size changes.
Step 3: Create the leash line
line = new Line(centerX, centerY, centerX, centerY);
line.setColor(Color.black);
add(line);Both endpoints start at the center, so the line has zero length and you won’t see it until the mouse moves. That’s normal. Don’t panic when the canvas looks empty of a line at first.
Notice there’s no var before line. You’re filling the outer variable, not making a new one.
Step 4: Create the ball
ball = new Circle(BALL_RADIUS);
ball.setPosition(centerX, centerY);
ball.setColor(Color.yellow); // check your instructions for the required color
add(ball);The ball goes in after the line so it draws on top. Reverse the order and the leash will cross over the ball, which looks wrong even if it technically works.
Step 5: Register the mouse handler
mouseMoveMethod(moveLeash);No parentheses after moveLeash. You’re handing the function over, not running it. Write moveLeash() and it runs once right now, then CodeHS has nothing to call later.
Step 6: Write the handler
function moveLeash(e) {
var x = e.getX();
var y = e.getY();
ball.setPosition(x, y);
line.setEndpoint(x, y);
}e is the event. It carries the mouse position, and getX() / getY() pull it out. The ball and the line’s end get the same two numbers, so they stay glued together.
Full code with explanation
var BALL_RADIUS = 30;
var ball;
var line;
function start() {
var centerX = getWidth() / 2;
var centerY = getHeight() / 2;
line = new Line(centerX, centerY, centerX, centerY);
line.setColor(Color.black);
add(line);
ball = new Circle(BALL_RADIUS);
ball.setPosition(centerX, centerY);
ball.setColor(Color.yellow);
add(ball);
mouseMoveMethod(moveLeash);
}
function moveLeash(e) {
var x = e.getX();
var y = e.getY();
ball.setPosition(x, y);
line.setEndpoint(x, y);
}Walking through it once, top to bottom: the variables are declared, start() runs when the program loads, and it builds the line and ball at the center. It then registers moveLeash. From then on, each mouse movement runs moveLeash, which reads the pointer and updates both objects. The line’s first endpoint is never touched again, which is exactly what makes it a leash.
Treat this as something to compare against, not something to paste. Names, colors and sizes in your assignment may differ, and your teacher can tell the difference between code you wrote and code you copied. Follow your school’s academic integrity policy.
Common mistakes and fixes
| What you see | Likely cause | Fix |
|---|---|---|
| Ball stays in the center | Handler never registered, or mouseMoveMethod is outside start() |
Call mouseMoveMethod(moveLeash); inside start(), with no parentheses on the name |
| Ball moves, line doesn’t | Only ball.setPosition is in the handler |
Add line.setEndpoint(x, y); |
| Whole line slides around | Used line.move() instead of setEndpoint() |
move() shifts both endpoints. Use setEndpoint() so the start stays fixed |
ball is not defined / undefined |
var used inside start(), creating a local copy |
Declare outside, assign inside without var |
| A trail of many circles | new Circle(...) is inside the handler |
Create objects once in start(), only update them in the handler |
| Leash draws over the ball | Ball added before the line | Add the line first, then the ball |
| Nothing appears at all | Missing add(...), or a typo like getx() |
Add both objects to the canvas and check capitalization: JavaScript is case-sensitive |
Autograder troubleshooting
Sometimes the picture looks perfect and the checks still fail. Look, this one is frustrating, but it’s almost always a mismatch with the instructions rather than a logic error.
Compare against the wording. If the exercise says the ball is a certain color or the line is a certain color, match it exactly. Same for radius and any named functions.
Check the starting state. If your instructions say both objects start at the center, make sure they do before the mouse ever moves.
Run it fresh. Refresh the editor and run again without touching the mouse first. A bug that only shows at load time hides if you test by wiggling the mouse right away.
Confirm the handler fires. Add println("moved"); as the first line of moveLeash and open the console. If nothing prints when you move the mouse over the canvas, the handler isn’t registered properly. If it prints but nothing moves, the problem is inside the handler. Delete the line when you’re done.
Read the message, not just the red X. The autograder often names the check that failed. Fix that one thing, not everything.
Practice variations
Once your 9.7.4 Leash solution works, change it and see what breaks. That’s where it really sinks in.
Anchor the leash at a corner instead of the center. Change the ball’s color depending on how far it is from the anchor. Keep the ball from leaving the canvas by checking x and y before using them. Add a second ball on a second leash. Each of these uses the same pattern: create once, update on events.
FAQs
What is CodeHS 9.7.4 Leash?
It’s a JavaScript graphics exercise in the Drawing Lines lesson. You build a ball and a line, keep one end of the line fixed at the canvas center, and make the other end follow the ball as it tracks the mouse pointer.
What does the 9.7.4 Leash exercise ask me to do?
Create a ball and a line, place them at the center, and use a mouse-move handler to move the ball and the line’s endpoint to the pointer’s position. Always confirm the details, like color and radius, in your own assignment.
What concepts does it use?
Mouse events, callbacks, coordinates, global variables, and object methods like setPosition() and setEndpoint(). It’s mostly a lesson in updating existing objects instead of making new ones.
How do I start 9.7 4 leash codehs?
Write down the setup steps and the movement steps separately. Build the ball and line at the center first and make sure they show up. Only then add the mouse handler.
Why is my code not passing?
Usually one of three things: the line endpoint isn’t updated, a variable was declared inside start() so the handler can’t reach it, or a color, radius or name doesn’t match the instructions. Check those in that order.
What’s the difference between setEndpoint() and move()?
setEndpoint() changes only the line’s ending point, so the start stays where it is. move() shifts the whole line, both endpoints, which breaks the leash effect.
Do I need a loop?
No. CodeHS calls your handler each time the mouse moves, so there’s nothing to loop over.
Why can’t I see the line at first?
Both endpoints start at the same point, so the line has zero length. It appears once the mouse moves.
Why does the number change between courses?
CodeHS organizes lessons differently by course and version. A similar Leash exercise can sit under another number, so match the exercise name and instructions, not only 9.7.4.
Can I use this code for my assignment?
Use it to check your own work and understand the logic. Submitting code you can’t explain is a bad idea, and your school’s academic integrity rules apply.
Summary and next step
The whole of 9.7.4 Leash comes down to one idea: build the ball and line once, then give both the same coordinates from the mouse while the line’s first endpoint never moves. If something breaks, check the table above before rewriting anything.
Your next move: close this page, write the solution from your own plan, and only compare once you’ve run it. Then try one variation, like the corner anchor. When that works, head to the next exercise in the unit (see our CodeHS Unit 9 help guide).
Tech Related Reading
- Vbox Software (VirtualBox) in 2026: What It Is & How to Use It
-
Project Management Software for Safety Engineering Consultancy
