Quick Facts
| Detail | Info |
| Exercise Name | Leash |
| Section Number | 9.7.4 |
| Unit | Drawing Lines (Unit 9) |
| Course | Introduction to Computer Science in JavaScript |
| Platform | CodeHS |
| Points Worth | 5 points |
| Language Used | JavaScript |
| Key Concepts | Mouse events, global variables, line drawing, object updates |
| Who Struggles Most | Beginners hitting interactive graphics for the first time |
| Comes After | 9.7.3 Drawing Lines Example |
| Comes Before | 9.7.5 Advanced Animator Badge |
| Real-World Skill Built | Event-driven programming used in games, apps, websites |
Why So Many Students Google This Exercise
Let me be honest with you right away.
You typed “9.7.4 leash CodeHS answers” because something went wrong. Maybe your ball isn’t moving. Maybe the line disappeared. Maybe nothing works and your teacher wants it by tomorrow.
That feeling? Totally normal.
This exercise trips up almost every student who hits it for the first time. It’s not because you’re bad at coding. It’s because this exercise quietly teaches three big ideas at once — and nobody warns you before you start.
By the end of this article, you’ll know exactly what went wrong, how to fix it, and why it went wrong in the first place.
See also “Akrylika: The See-Through Plastic That Changed Everything“
What Is CodeHS and Where Does 9.7.4 Fit?
CodeHS is a website where schools teach coding. It started in 2012 and now has over two million students using it every year. Teachers love it because students can write, run, and test code right inside their browser.
The course we care about here is called Introduction to Computer Science in JavaScript. It starts with simple things like variables and loops. Then it builds up to graphics, shapes, movement, and eventually — animation.
Section 9 is the animation unit. It covers shapes, timers, mouse clicks, mouse movement, and drawing lines. Exercises are built upon one another.
Exercise 9.7.4 sits right at the end of the Drawing Lines section. By the time you hit it, you’ve already watched a video on drawing lines (9.7.1), answered a quiz (9.7.2), and studied an example program (9.7.3). Then 9.7.4 says: “Now you try it.”
That jump — from watching to doing — is where most students get stuck.
What the Leash Exercise Actually Asks You to Do
Picture this. You’re holding a dog on a leash at the park. You walk. The dog walks with you. The leash stretches between you and the dog the whole time.
That’s exactly what this exercise wants on screen.
This is how your completed program should appear:
- A yellow circle (the ball / the “dog”) sits on the canvas
- A line (the leash) connects from the center of the screen to the ball
- When you move your mouse, the ball follows your cursor
- The line stretches along with the ball every time you move
The center of the screen is the fixed anchor point. It never moves. The ball follows your mouse. The line always connects those two points.
That sounds simple. And honestly, the concept IS simple. The tricky part is making it work in code.
The Three Big Ideas Hiding Inside This Exercise
Here’s something nobody tells you upfront. This exercise isn’t really about drawing a leash. It’s using the leash to secretly teach you three major programming concepts.
Concept 1: Global Variables
Your ball and your line need to exist everywhere in your code. If you create them inside one function, other functions can’t see them. That’s called a scope problem. It’s one of the most common reasons this exercise breaks.
The fix is declaring your ball and leash as global variables — at the very top of your code, outside every function.
Concept 2: Mouse Event Handling
Your program doesn’t run top to bottom like a recipe. It waits. It listens for your mouse to move. When it does, a special function fires automatically. That function is called a mouse event handler.
In CodeHS JavaScript, you set that up using mouseMoveMethod(). You tell it which function to call every time your mouse moves across the canvas.
Concept 3: Updating Objects, Not Recreating Them
This one is sneaky. Every time the mouse moves, you need the ball and the line to update their positions. But here’s the trap many students fall into: they try to delete and redraw the shapes every frame.
That causes flickering, lagging, and a messy canvas.
The smarter move is to create the shapes once, then only update their positions on each mouse movement. The ball has setPosition(). The line has setEndPoint(). Use those instead of redrawing everything.
Building the Solution Step by Step
Let’s walk through the logic like we’re building it together from scratch at a kitchen table.
Step 1: Set up your constants
Define how big you want your ball to be. Put this at the top.
javascript
var BALL_RADIUS = 30;
Step 2: Declare global variables
These live outside every function. This is critical.
javascript
var ball;
var leash;
var centerX = getWidth() / 2;
var centerY = getHeight() / 2;
centerX and centerY are the middle of your canvas. That’s where the leash anchors.
Step 3: Write your start() function
This runs once when the program loads. Create your ball and line here, then add them to the canvas.
javascript
function start() {
ball = new Circle(BALL_RADIUS);
ball.setColor(Color.yellow);
ball.setPosition(centerX, centerY);
add(ball);
Line (centerX, centerY, centerX, centerY) is the new leash;
leash.setColor(Color.black);
add(leash);
mouseMoveMethod(updateLeash);
}
Notice the last line. That line tells CodeHS: “Every time the mouse moves, run the updateLeash function.”
Step 4: Write your updateLeash() function
This is the magic part. This runs every single time your mouse moves.
javascript
function updateLeash(e) {
var mouseX = e.getX();
var mouseY = e.getY();
ball.setPosition(mouseX, mouseY);
leash.setEndPoint(mouseX, mouseY);
}
e is the event object. It carries the current mouse position. You grab the X and Y from it. Then you move the ball there. Then you update the leash endpoint to the same spot.
That’s it. That is the entire logic.
Why the Order of Adding Objects Matters
Here’s a detail that surprises students. CodeHS draws objects in the order you add them.
Add the leash line first, then the ball. That way, the ball sits on top of the line visually. It looks natural.
If you add the ball first and the line second, the line draws over the ball. The ball seems to vanish. Students panic and think their code is broken. Really, the ball is just hiding underneath the line.
Always add the line first. Add the ball second.
The Most Common Mistakes (And Exactly How to Fix Them)
Let’s go through the bugs that kill this exercise for most people.
Mistake 1: Declaring ball and leash inside start()
If you write var ball = new Circle(…) inside start(), then updateLeash() has no idea what ball is. It’s stuck in a bubble. Declare both globally.
Mistake 2: Calling add() inside the mouse event function
Some students try to add new shapes every time the mouse moves. That creates hundreds of overlapping shapes piling on top of each other. The canvas becomes a disaster. Create shapes once in start(). Only update them in updateLeash().
Mistake 3: Forgetting to call mouseMoveMethod()
Your updateLeash function exists. But without calling mouseMoveMethod(updateLeash), nothing triggers it. The ball just sits there, frozen, no matter how much you move your mouse.
Mistake 4: Setting both endpoints of the line to the mouse position
The leash line has a start point and an end point. The start point should be the center of the screen. Always. The end point follows the mouse. If both points follow the mouse, you get a dot that moves — not a line that stretches.
Mistake 5: Swapping X and Y coordinates
On a computer screen, X goes left and right. Y goes up and down. The canvas (0,0) point is the top-left corner. Getting these mixed up sends your ball flying in the wrong direction.
How to Debug When It Breaks
Okay, you tried and something still isn’t working. Don’t rewrite everything. Debug one piece at a time.
Check 1: Does the event fire?
Put a simple print statement inside your updateLeash function:
javascript
println(e.getX());
Move your mouse. If numbers appear, your event is working. If nothing prints, the problem is in how you registered the mouse method.
Check 2: Is the ball visible?
Comment out the leash line temporarily. Does the ball appear and follow your mouse? If yes, the ball logic is fine and the leash is the problem.
Check 3: Is the anchor point correct?
Print your centerX and centerY values. Make sure they’re actually in the center of the canvas, not zero.
Check 4: Are variables global?
Look at where ball and leash are declared. If they’re inside any function, move them to the top of your code.
What This Exercise Teaches Beyond the Points
I want to take a second and talk about something bigger.
This exercise is only worth 5 points. But what it teaches you is worth everything in coding.
Games like Minecraft respond to your keyboard and mouse every single millisecond. Apps like Instagram update your feed the moment you scroll. Websites update prices, maps, and messages without you refreshing. They all use the same basic idea you’re learning right now: event-driven programming.
Your code stops running one time and then sits quietly, listening. When something happens — a mouse move, a key press, a tap — it wakes up and responds. Then it goes quiet again.
That pattern is everywhere in real software. Learning it here, in 9.7.4, plants a seed that grows into understanding every interactive app you’ll ever build.
Cool Things You Can Try Once It Works
Once your basic leash is working, you can have some fun with it. These aren’t required for the exercise, but they make great practice.
- Change the ball color — Make it turn red when the mouse moves fast
- Add a length limit — Use math to stop the ball from going further than a certain distance from center
- Make the leash thicker — Try leash.setLineWidth(5) and see what happens
- Add a second ball — Make a second ball follow the first one, creating a chain
- Keep the ball on screen — Add a check so the ball stops at the canvas edges and doesn’t disappear
Each of these tweaks forces you to think about the logic more deeply. That’s where real skill-building happens.
The Bigger Picture: Where These Skills Take You
Section 9 of CodeHS builds toward something big. After the leash, you tackle key events. Then you build actual games. The mouse tracking you learned here becomes the paddle in Pong. The event handlers become the controls in a platformer. The coordinate system becomes the map in a top-down adventure game.
None of that works without understanding what you just built in 9.7.4.
Every professional JavaScript developer has written some version of this code. The variable names change. The library names change. The concepts never do. React developers update component state on mouse events. Unity developers track cursor position in game scenes. SwiftUI developers respond to drag gestures.
You just learned the foundational version of something that runs the entire interactive world.
Final Words
Let’s be real — when you first searched “9.7.4 leash CodeHS answers,” you probably just wanted something to paste in and move on.
That’s okay. We’ve all been there.
But now you understand what this exercise is actually doing. You know why the global variables matter. You know why updating is better than recreating. You know how to debug when it breaks. And you know the real reason this exercise exists in the first place.
Understanding it doesn’t just get you 5 points. It gives you a mental model that every future coding exercise will build on. The leash is small. The idea is enormous.
Take your time, build it piece by piece, and when that ball finally follows your mouse with the line stretching behind it — that little moment of it working feels really good. Trust me.
FAQs
Q1: What exactly is the goal of exercise 9.7.4 in CodeHS?
You need to build a program where a ball follows your mouse cursor and a line connects the ball to the center of the screen, like a dog on a leash.
Q2: Why does my ball not move when I move the mouse?
You most likely forgot to call mouseMoveMethod() inside your start() function. Without that line, nothing triggers your update function.
Q3: Why does my line disappear when I move the mouse?
You are probably recreating the line object every time the mouse moves. Create it once in start() and only call setEndPoint() to update it inside your event function.
Q4: What are global variables and why do I need them here?
Global variables are accessible from anywhere in your code because they are declared outside of all functions.Your ball and leash must be global so both start() and updateLeash() can use them.
Q5: My ball shows up behind the leash line. How do I fix that?
Switch the order in start(). Add the leash line first, then add the ball second. Objects added later appear on top.
Q6: What does e.getX() and e.getY() mean?
When the mouse moves, the event object e carries the current mouse position. getX() gives the horizontal position and getY() gives the vertical position on the canvas.
Q7: Why is (0, 0) placed in the upper-left corner of CodeHS?
That’s how browser canvas coordinates work. X increases going right. Y increases going down. It’s different from math class, where Y increases going up.
Q8: Is it possible to relocate the leash terminus using setPosition()?
No. setPosition() is for shapes like circles. Lines use setEndPoint() to update their ending coordinate. Using the wrong method causes errors.
Q9: How do I find the center of the canvas?
Use getWidth() / 2 for the horizontal center and getHeight() / 2 for the vertical center. Save those as variables before your functions start.
Q10: What happens if I put var ball inside my start() function?
Your updateLeash() function won’t know what ball means. You’ll get an error or nothing will update. Always declare it at the very top, outside all functions.
Q11: Is it okay to look at examples or help guides for this exercise?
Yes, using guides to understand the logic is completely fine. Understanding is the whole point. Copying code without understanding it means you’ll be lost in the very next exercise.
Q12: What comes after exercise 9.7.4 in CodeHS?
You earn the Advanced Animator Badge (9.7.5), then move into key events in section 9.8, where you learn to control programs with keyboard input.
Q13: Will I use these skills again in CodeHS or in real coding?
Absolutely. Mouse event handling is used in virtually every interactive program, website, and game. This is one of the most important patterns in all of programming.
Keep creating, innovating, and inspiring with Content Ideators every day.
