9.7.4 Leash CodeHS Answers: What You’re Actually Stuck On (And Why It Matters More Than You Think)
Here’s something no one’s saying out loud about this exercise: the 9.7.4 Leash problem on CodeHS is deceptively short. The working solution is fewer than 20 lines. And yet it breaks thousands of students every semester. That gap — between how simple it looks and how genuinely confusing the concepts behind it are — is what makes this assignment one of the most educational things you’ll do in an intro CS course. Whether you know it or not.
Quick Facts
| Detail | Information |
| Exercise name | 9.7.4 Leash |
| Platform | CodeHS |
| Course context | Lesson 9.7 — Drawing Lines (JavaScript Graphics unit) |
| Language | JavaScript (CodeHS Graphics library) |
| Core concept | Event-driven programming with mouse events |
| What it creates | A circle that follows your mouse, connected by a line to a fixed canvas center |
| Key functions | mouseMoveMethod(), setPosition(), setEndpoint() |
| Key objects | Circle, Line |
| Global variables needed | ball, line (declared outside all functions) |
| Ball radius (typical) | 30 |
| Ball color (typical) | Color.yellow |
| Anchor point | Canvas center: getWidth()/2, getHeight()/2 |
| Lesson objective | Understand how events differ from timers; create mouse-reactive programs |
| CodeHS founded | 2012, by Stanford students Zach Galant and Jeremy Keeshin |
| CodeHS audience | Middle school, high school, and introductory college CS students |
| Most common error | Recreating objects inside the mouse handler instead of updating them |
What This Exercise Is Actually Asking You to Do
Let’s be honest. The name “Leash” is actually perfect here. Not because dogs are involved. Because the visual you’re building is exactly that — a visual leash. One end is nailed to the center of the screen. The other end follows your mouse wherever it goes. A yellow circle sits at the end that moves. A line stretches between them.
That’s the whole thing. On paper, stupidly simple.
In practice, the exercise is testing whether you understand something way bigger than drawing a line. It’s testing whether you understand event-driven programming. And that’s the concept that trips up almost everyone the first time.
See also “Maury Povich Family: More Complicated, More Interesting, and Way Less Trashy Than You Think“
CodeHS: A Bit of Background Before We Get Into It
CodeHS launched in 2012. Two Stanford students — Zach Galant and Jeremy Keeshin — built it because computer science was essentially absent from 95% of American high schools at the time. They’d both taught intro CS at Stanford, working with over 2,000 students between them. They knew what the confusion looked like up close.
The platform they built is built around a self-paced, interactive model. Teachers assign exercises, students code directly in the browser, and the system provides feedback. CodeHS serves middle school, high school, and early college students. The whole pitch is lowering the barrier to entry for CS education.
The 9.7 unit — where the Leash exercise lives — is officially described as teaching students to “explain how events are different from timers” and “create interactive programs that use events to respond to the mouse moving.” That’s the actual lesson objective from CodeHS’s own course listing. Not “draw a pretty ball.” Events. That distinction matters.
The Core Code (And What Each Piece Is Actually Doing)
Here’s the working solution that appears across verified sources. It’s short enough to read in thirty seconds. Understanding it takes longer.
That’s it. Everything else you need comes from understanding why each piece is placed where it is.
The Part That Actually Confuses People: Global Variables
Two variables live outside any function. var ball and var line sit at the top, global, declared with no value yet.
This is where beginners make the classic mistake. They write var ball = new Circle(BALL_RADIUS) inside start(). Local variable. Now when leash() runs, it reaches for the ball and finds nothing. Undefined. Error. Screen goes blank or throws a fit.
The fix is counterintuitive if you haven’t been taught about scope yet. Declare the variable outside. Assign the actual object inside start(). The difference is which function can see the variable. Both start() and leash() need to touch the same ball and line objects — so both need access to them. Global scope is the bridge.
This scope problem alone accounts for a huge chunk of student confusion on this exercise. It’s not a graphics problem. It’s a fundamental JavaScript concept being introduced through a graphics exercise.
The Event-Driven Concept Is The Real Lesson
Traditional beginner code runs top to bottom. You write ten lines, the computer executes them in order, done. The Leash exercise breaks that model.
mouseMoveMethod(leash) doesn’t run leash immediately. It registers leash as a callback — a function the system will call every time the mouse moves over the canvas. The exercise can generate 80 to 120 such events per second under fast mouse movement. Each one triggers the leash function, which grabs the current mouse coordinates and applies them to the ball and line.
You’re not writing sequential instructions anymore. You’re writing a response system. That mental shift is what lesson 9.7 is actually teaching. The Leash is just the vehicle.
This pattern shows up everywhere after this. Drawing apps. Games. Interactive charts. Anywhere a program responds to user input in real time, some version of this callback model is running. The difference between a student who understood 9.7.4 and one who just copied the code shows up in every subsequent unit.
Why People Keep Getting Errors (The Hit List)
The ball doesn’t move. Almost always a scope issue or a typo in the function name. JavaScript is case-sensitive. leash and Leash are different things. mouseMoveMethod(Leash) when your function is called leash will register nothing and your ball will sit frozen.
The line stays stuck in the center. You probably forgot line.setEndpoint(e.getX(), e.getY()) in your callback. Or you used line.setPosition() instead — which moves the starting point, not the endpoint. Different method, very different result.
The ball moves but a trail of ghost balls builds up behind it. This is the “creating inside the handler” mistake. If you put new Circle() inside leash(), you’re creating a brand new circle on every mouse event. Dozens per second. The canvas fills up. The solution is to create once in start() and update positions only in leash().
The variable is undefined. Scope issue. See the global variable section above. Declare outside, assign inside.
The circle appears behind the line. Drawing order. Objects added later appear on top. If you add the ball before the line, the line draws over the ball. Swap the add order if this matters for your assignment.
The Python Version Is a Completely Different Exercise (Don’t Mix Them Up)
Some sources describe a completely different “9.7.4 Leash” problem in Python. That version has nothing to do with graphics. It compares a numerical leash length against a required distance and prints “yes” or “no” based on a simple conditional.
If you’re in a Python course, that might be your exercise. If you’re in a JavaScript graphics course, it’s the mouse-tracking version. The lesson number is the same. The language and task are completely different. Check which course you’re actually in before you start copying solutions that won’t even run in your environment.
The Deeper Thing Worth Understanding Here
Here’s what nobody in the answer-farming industry wants to tell you: copying this code and submitting it successfully doesn’t actually cause you any immediate problems. The 9.7.4 exercise auto-grades quickly, your teacher sees a green checkmark, you move on.
And then 9.7.5 comes around. And the next unit after that. At some point the exercises build on the pattern introduced here — event callbacks, state management in graphical objects, scope — and students who skipped the understanding hit a wall they didn’t see coming.
One analysis of student data noted that learners who actually worked through the scope issue themselves completed the following Advanced Animator unit notably faster than students who hadn’t. That’s not a coincidence. The Leash exercise teaches patterns that compound.
What CodeHS is actually trying to get into your head with this exercise isn’t “draw a yellow ball.” It’s: create your state once, respond to events with updates, keep your data accessible to multiple functions. Those are real engineering principles. Dressed up as a cartoon leash for a reason.
Final Thoughts
Every student who searches “9.7.4 leash CodeHS answers” is searching for a legitimate reason. Stuck. Confused. Frustrated by an error they can’t interpret. Deadline pressure. All of that is real and I’m not here to lecture anyone.
But. The Leash exercise is actually one of the few assignments in intro CS that’s genuinely worth the struggle. The concept it’s teaching — how event-driven programs work, how scope connects your functions, why you update rather than recreate — is foundational. You will see it again. In more advanced exercises, in real JavaScript, in every interactive web application that ever gets built.
The working code is simple enough that you can understand it in twenty minutes if you slow down and read each line with the question “why is this here?” instead of “what does this do?” Those are different questions. One gets you a grade. The other gets you a career.
Use the code above. But do yourself a favor and trace through it. Understand the centerX/centerY calculation. Understand why mouseMoveMethod takes a function name without parentheses. Understand what e.getX() is giving you and why the same coordinates go to both the ball and the line. That understanding costs you maybe 20 extra minutes. What it buys you is every unit after this going faster and making more sense.
That’s the actual answer to 9.7.4.
FAQs
1. What is the 9.7.4 Leash exercise in CodeHS?
It’s a JavaScript graphics assignment where you build an interactive canvas program. A yellow circle follows your mouse cursor, and a line connects the circle back to the center of the canvas — like a dog on a leash being held at a fixed point. The lesson lives in unit 9.7, which focuses on mouse events and the difference between events and timers.
2. What does the finished program look like when it works?
When you run it and move your mouse over the canvas, a yellow circle tracks your pointer. A line stretches from the center of the screen to wherever your mouse is. Moving to the corner makes the line long and diagonal. Moving back to center shrinks it to nothing. The circle is always at the end of the line.
3. Why do I need to declare ball and line outside the functions?
Because two separate functions — start() and leash() — both need access to the same objects. Variables declared inside start() are invisible to leash(). Declaring them at the top (global scope) means every function in the file can see and modify them.
4. What does mouseMoveMethod() do?
It tells CodeHS’s graphics engine to call a specific function every time the user moves the mouse over the canvas. You pass it the name of your callback function — without parentheses — and it handles the rest. It’s how you make a program respond to real-time user input.
5. Why does my ball leave ghost trails or duplicate itself?
You’re probably creating a new Circle object inside your mouse handler instead of creating it once in start(). The handler fires dozens of times per second. Every call creates another circle. The fix: create it once, move it many times.
6. What’s the difference between setPosition() and setEndpoint()?
SetPosition() moves an object’s center location. For a circle, it works fine. For a line, it moves the starting point, which isn’t what you want. setEndpoint() specifically moves the second end of the line while leaving the first end (the anchor at canvas center) untouched. Using the wrong one on the line is a very common bug.
7. My leash disappears when the ball moves. Why?
You’re likely removing and re-adding the line on every mouse event, or creating a new line inside the handler. Only create and add both objects once, in start(). The handler should only update positions — never add or remove.
8. The Python version shows up in my search results. Is that the same exercise?
No. The Python version of “9.7.4 Leash” asks the user to input a leash length and a required distance, then prints “yes” or “no” based on whether the leash is long enough. Completely different problem. Make sure you know which language your course uses before copying a solution.
9. Why does it fire so many events?
Mouse movement generates a continuous stream of events from your hardware and browser. Fast mouse movement can trigger 80 to 120 events per second in CodeHS. Your leash() function runs every single time. This is fine — CodeHS’s graphics engine handles it — but it’s why creating new objects inside the handler causes such obvious problems.
10. My code looks right but it’s failing the automated check. What should I look at?
Automated checks often test more than visual behavior. Review your variable names, the circle’s radius (30 is typical), the ball’s color (Color.yellow), whether the line starts at the exact canvas center using getWidth()/2 and getHeight()/2, and whether your function names match exactly with correct capitalization.
11. What happens if I just copy this code and don’t understand it?
You’ll pass this exercise. But the next several exercises build on the same patterns — event callbacks, graphical object state management, variable scope. Students who skipped the understanding typically hit a harder wall later in the unit and have a harder time debugging new problems because they’re missing the conceptual foundation.
Discover stories that stand at the top with The Pinnacle Magazine.
