If you are looking for 9.7.4 Leash CodeHS answers, the exercise is part of CodeHS’s JavaScript Graphics curriculum. In the current CodeHS Introduction to Computer Science in JavaScript course listing, 9.7.4 Leash appears under 9.7 Drawing Lines, immediately after the drawing-lines example.
The exercise combines a few beginner graphics concepts: a circle, a line, canvas coordinates, and mouse movement. The key behavior is simple: the ball follows the mouse while one end of the leash remains anchored and the other endpoint follows the ball.
The most useful way to solve it is to understand that relationship rather than treat the assignment as a collection of commands.
What Is 9.7.4 Leash in CodeHS?
9.7.4 Leash is a JavaScript Graphics exercise that uses mouse movement to control graphical objects. The program creates a ball and a line, places them at the canvas center, and then updates their positions as the mouse moves.
The important coordinate relationship is:
Fixed point
|
| leash
|
- ball
mouse position
The fixed end of the line stays at the starting point. The other endpoint uses the current mouse coordinates. The circle uses those same coordinates for its center.
CodeHS’s official JavaScript Graphics documentation confirms that its graphics system supports Circle, Line, setPosition(), setEndpoint(), canvas dimension methods, and mouse event callbacks.
A Working 9.7.4 Leash Solution
A typical implementation looks like this:
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);
add(line);
ball = new Circle(BALL_RADIUS);
ball.setPosition(centerX, centerY);
add(ball);
mouseMoveMethod(leash);
}
function leash(e) {
ball.setPosition(e.getX(), e.getY());
line.setEndpoint(e.getX(), e.getY());
}
The exact starter code and visual requirements can vary between CodeHS courses or course versions, so your assignment’s own instructions should take priority over any generic solution. The CodeHS course listing confirms the exercise’s current placement, while the official documentation confirms the APIs used here.
How the Solution Works
There are really two stages.
Initialization happens inside start(). The program creates the graphical objects, positions them, adds them to the canvas, and registers the mouse event.
Interaction happens inside leash(e). Every time the mouse moves, the function receives the new coordinates and applies them to the ball and the moving end of the line.
This distinction is important. You create the objects once. You do not create a new circle or line every time the mouse moves.
1. Calculate the Canvas Center
var centerX = getWidth() / 2;
var centerY = getHeight() / 2;
getWidth() returns the width of the graphics canvas, while getHeight() returns its height. Dividing each by two gives the center coordinates.
This is preferable to arbitrarily entering coordinates because the program calculates the center from the actual canvas dimensions.
For example, if the canvas were 400 pixels wide and 400 pixels high, the center would be:
centerX = 400 / 2 = 200
centerY = 400 / 2 = 200
The important idea is not the particular numbers. It is calculating the position from the canvas itself.
2. Create the Leash
line = new Line(centerX, centerY, centerX, centerY);
add(line);
A Line is defined by four coordinates:
x1, y1, x2, y2
The first pair represents one endpoint and the second pair represents the other.
At the beginning, both endpoints are placed at the center:
(centerX, centerY) → (centerX, centerY)
That means the line initially has zero length.
Once the mouse moves, only the second endpoint changes.
3. Create the Ball
ball = new Circle(BALL_RADIUS);
ball.setPosition(centerX, centerY);
add(ball);
new Circle(BALL_RADIUS) creates the circle.
setPosition() places its center at the supplied coordinates.
add(ball) puts the circle onto the graphics canvas.
One common beginner mistake is confusing creating an object with displaying it. The Circle can exist as a JavaScript object without being visible until it is added to the canvas.
4. Register the Mouse Event
mouseMoveMethod(leash);
This is the part that makes the program interactive.
CodeHS documents mouseMoveMethod(functionToCall) as the mouse movement callback. When the mouse moves, CodeHS calls the registered function. Its documentation specifically notes that the function name is passed without parentheses.
So use:
mouseMoveMethod(leash);
not:
mouseMoveMethod(leash());
The first passes the function so CodeHS can call it when the event occurs. The second attempts to call the function immediately.
5. Read the Mouse Coordinates
The event function receives an event object:
function leash(e) {
The current mouse position can then be obtained with:
e.getX()
e.getY()
CodeHS’s official documentation demonstrates these methods for retrieving the mouse event’s X and Y coordinates.
For example:
function leash(e) {
println(e.getX());
println(e.getY());
}
would give you the current horizontal and vertical mouse positions.
6. Move the Ball
The ball needs to follow the mouse:
ball.setPosition(e.getX(), e.getY());
The circle’s center therefore becomes the current mouse position.
If the mouse is at (150, 100), the ball’s center moves to (150, 100).
If the mouse then moves to (250, 180), the ball moves to (250, 180).
The same ball is being repositioned. A new ball is not created each time.
7. Move the Line Endpoint
The leash needs to remain connected to the ball:
line.setEndpoint(e.getX(), e.getY());
This changes the line’s second endpoint while leaving its starting point alone.
That is why setEndpoint() is important here. CodeHS provides it specifically for changing the endpoint of a line, and its mouse-event documentation even shows an example that updates a line endpoint using e.getX() and e.getY().
The result is:
Fixed anchor
\
\
- Ball
As the mouse moves, the ball and the free end of the line move together.
The Core Logic in One Picture
You can reduce the entire exercise to three coordinate locations:
| Element | Coordinates |
| Fixed end of leash | centerX, centerY |
| Ball center | e.getX(), e.getY() |
| Moving end of leash | e.getX(), e.getY() |
The last two entries are deliberately identical.
That is what keeps the ball attached to the leash.
Why the Variables Are Outside start()
The variables are declared at the top:
var ball;
var line;
Then the objects are assigned inside start():
ball = new Circle(BALL_RADIUS);
line = new Line(centerX, centerY, centerX, centerY);
This allows the leash() function to access the same objects later.
If you instead wrote:
function start() {
var ball = new Circle(BALL_RADIUS);
}
then that ball variable belongs to start(). The event handler would not have access to that same local variable.
The important distinction is between declaring the object reference and creating the graphical object.
Common 9.7.4 Leash Errors
The ball does not move
Check the mouse callback:
mouseMoveMethod(leash);
Make sure you registered the function and did not accidentally write leash().
CodeHS identifies mouseMoveMethod() as the callback used for mouse movement.
The line does not follow the ball
Check that you are changing its endpoint:
line.setEndpoint(e.getX(), e.getY());
Do not accidentally move the fixed starting point.
The ball and line become disconnected
Both should use exactly the same mouse coordinates:
ball.setPosition(e.getX(), e.getY());
line.setEndpoint(e.getX(), e.getY());
If one uses different coordinates, the visual connection will break.
The program creates many balls
Do not create the circle inside the mouse event function.
Avoid this pattern:
function leash(e) {
var ball = new Circle(BALL_RADIUS);
ball.setPosition(e.getX(), e.getY());
add(ball);
}
That creates another circle every time the mouse moves.
Instead, create the circle once in start() and move the existing object.
The line moves completely instead of stretching
The fixed end should remain unchanged.
The event handler should update:
line.setEndpoint(e.getX(), e.getY());
rather than repeatedly changing the line’s starting point.
Nothing happens when the mouse moves
Check these three pieces:
mouseMoveMethod(leash);
function leash(e) {
…
}
and make sure the graphics objects were created before the event handler tries to modify them.
setPosition() vs. setEndpoint()
This distinction is one of the most important things to understand in the exercise.
| Method | Used for | Effect |
| ball.setPosition(x, y) | Circle | Moves the circle’s center |
| line.setEndpoint(x, y) | Line | Moves the line’s endpoint |
The methods do different jobs.
For the circle, you want the entire object’s center to follow the mouse.
For the line, you want only one endpoint to follow the mouse while the other remains anchored.
That is why using the right method matters more than simply getting the coordinates right.
Why mouseMoveMethod() Does Not Need a Loop
A beginner might expect something like:
while (…) {
// check mouse
}
But that is not necessary for this exercise.
CodeHS uses event-driven programming. You register a callback, and the graphics system invokes that callback when the relevant mouse event occurs. The official documentation describes mouse events as a way for programs to respond to clicks, drags, and movements.
So the structure is:
Program starts
↓
Create objects
↓
Register mouse callback
↓
Wait for mouse movement
↓
Read X and Y
↓
Move ball
↓
Move line endpoint
↓
Wait for next movement
That pattern appears throughout interactive programming, including games, drawing applications, and graphical interfaces.
A Cleaner Version Using Temporary Coordinates
You can also write the event function this way:
function leash(e) {
var mouseX = e.getX();
var mouseY = e.getY();
ball.setPosition(mouseX, mouseY);
line.setEndpoint(mouseX, mouseY);
}
This does exactly the same conceptual job.
The advantage is readability. Instead of repeatedly calling e.getX() and e.getY(), you give the values meaningful names.
For beginners, this can make the coordinate relationship easier to see:
mouseX, mouseY
↓
┌───┴───┐
↓ ↓
ball line
position endpoint
What This Exercise Actually Teaches
Although the finished program is small, several useful programming concepts are packed into it.
Coordinates: You work with X and Y positions on a two-dimensional canvas.
Variables: You store references to graphical objects so they can be modified later.
Functions: The program separates initialization from mouse-event behavior.
Event-driven programming: The program reacts to mouse movement rather than simply executing a fixed sequence.
Object manipulation: Existing graphics objects can be moved after they have been created.
Callbacks: mouseMoveMethod() receives a function that CodeHS invokes when the mouse moves.
These concepts are directly supported by the CodeHS Graphics API.
A Simple Way to Debug Your Code
If your solution is not working, do not rewrite everything at once.
Check it in this order:
- Does the program run without a syntax error?
- Does the ball appear?
- Does the line appear?
- Does the ball start at the expected location?
- Is mouseMoveMethod() registered?
- Does the event function receive e?
- Does e.getX() and e.getY() give the expected coordinates?
- Does the ball move to those coordinates?
- Does the line endpoint use those same coordinates?
- Does the fixed end of the line remain unchanged?
This isolates the problem instead of changing several things simultaneously.
Why the Exact Assignment Instructions Still Matter
Search results for this exercise are not perfectly consistent. Some third-party pages describe slightly different versions of the exercise, and similar Leash exercises have appeared under different numbers in different CodeHS course structures.
The current CodeHS course listing, however, places 9.7.4 Leash under 9.7 Drawing Lines.
That means the safest approach is to use the assignment visible in your own CodeHS course as the final specification. A generic solution can demonstrate the programming pattern, but your course may impose a particular radius, color, starting position, variable name, or other requirement.
9.7.4 Leash Quick Reference
| Code | Purpose |
| new Circle(radius) | Creates the ball |
| new Line(x1, y1, x2, y2) | Creates the leash |
| getWidth() | Gets canvas width |
| getHeight() | Gets canvas height |
| setPosition(x, y) | Positions the circle |
| setEndpoint(x, y) | Changes the line endpoint |
| mouseMoveMethod(fn) | Registers a mouse movement callback |
| e.getX() | Gets the mouse X coordinate |
| e.getY() | Gets the mouse Y coordinate |
| add(object) | Adds a graphic to the canvas |
These methods are documented in CodeHS’s JavaScript Graphics documentation.
Final Takeaway
The central idea behind 9.7.4 Leash CodeHS answers is synchronization.
Create the ball and line once. Keep one end of the line anchored. When the mouse moves, use its X and Y coordinates for both the ball’s center and the line’s moving endpoint.
You may also read: Kecalf Cunningham