If you are working on 9.7.4 Leash in CodeHS, the exercise is a JavaScript Graphics problem built around mouse movement, coordinates, a circle, and a line. In the current CodeHS course structure, 9.7.4 Leash appears inside 9.7 Drawing Lines, immediately after the Drawing Lines example and quiz.
The core idea is simple: a ball follows the mouse while a line connects the ball to a fixed point on the canvas. The exercise is really testing whether you can create graphics once, register a mouse event, read the mouse coordinates, and update existing objects when the event occurs.
A working 9.7.4 Leash solution
A typical implementation of the Leash exercise looks like this:
var BALL_RADIUS = 30;
var ball;
var leash;
function start() {
var centerX = getWidth() / 2;
var centerY = getHeight() / 2;
leash = new Line(centerX, centerY, centerX, centerY);
add(leash);
ball = new Circle(BALL_RADIUS);
ball.setPosition(centerX, centerY);
add(ball);
mouseMoveMethod(moveLeash);
}
function moveLeash(e) {
var mouseX = e.getX();
var mouseY = e.getY();
leash.setEndpoint(mouseX, mouseY);
ball.setPosition(mouseX, mouseY);
}
This uses the CodeHS Graphics methods for creating circles and lines, positioning a circle, changing a line’s endpoint, obtaining the canvas dimensions, and responding to mouse movement.
The exact radius, color, variable names, or other visual requirements can differ between courses or versions. If your assignment gives specific values, those instructions should take priority.
What 9.7.4 Leash is actually asking you to understand
The important relationship is between three locations:
| Location | Purpose |
| Canvas center | Fixed starting point of the leash |
| Mouse position | Moving endpoint of the leash |
| Ball center | Follows the mouse position |
Suppose the center of the canvas is:
(centerX, centerY)
and the mouse is currently at:
(mouseX, mouseY)
The line connects:
(centerX, centerY)
to
(mouseX, mouseY)
The ball is centered at:
(mouseX, mouseY)
Because the ball and the line endpoint always use the same coordinates, the ball appears attached to the line.
That shared coordinate relationship is the heart of the exercise.
Why getWidth() and getHeight() matter
You do not need to guess the center of the CodeHS canvas.
CodeHS provides getWidth() and getHeight() for obtaining the canvas dimensions. Dividing each by two gives the center coordinates.
var centerX = getWidth() / 2;
var centerY = getHeight() / 2;
This is better than hard coding a particular coordinate because the calculation remains correct if the canvas dimensions change.
The same technique is useful throughout graphics programming. Instead of assuming where the middle of a screen is, calculate it from the screen itself.
How the line becomes a leash
A CodeHS Line is created with four coordinates:
new Line(x1, y1, x2, y2);
The first pair defines the starting point and the second pair defines the endpoint. CodeHS also provides setPosition() for changing a line’s starting point and setEndpoint() for changing its endpoint.
For Leash, the starting point needs to remain fixed.
So the line can begin like this:
leash = new Line(centerX, centerY, centerX, centerY);
Both endpoints initially have the same coordinates. That means the line has no visible length yet.
When the mouse moves, only the endpoint changes:
leash.setEndpoint(mouseX, mouseY);
The center remains unchanged.
If you accidentally move the starting point instead, the entire relationship changes because the anchor is no longer fixed.
How the ball follows the mouse
The ball is a CodeHS Circle.
CodeHS creates a circle with:
var ball = new Circle(radius);
and positions its center with:
ball.setPosition(x, y);
The official documentation confirms that a circle’s position refers to its center.
That means the movement function can directly use the mouse coordinates:
ball.setPosition(mouseX, mouseY);
There is no need to subtract the radius from the X or Y coordinate.
For example, if the mouse is at:
(250, 180)
the ball’s center should also be:
(250, 180)
and the leash endpoint should be:
(250, 180)
Both objects therefore remain aligned.
Why mouseMoveMethod() is essential
Creating the ball and line is only the setup. The program also needs to know when the mouse moves.
CodeHS provides:
mouseMoveMethod(functionToCall);
to register a function that responds to mouse movement. Its documentation specifically describes the supplied function as a callback for mouse movement events.
So this:
mouseMoveMethod(moveLeash);
tells CodeHS:
When the mouse moves, run moveLeash.
Notice that there are no parentheses after moveLeash.
Use:
mouseMoveMethod(moveLeash);
not:
mouseMoveMethod(moveLeash());
The first passes the function to CodeHS so it can call it when the event occurs. The second attempts to call the function immediately.
CodeHS’s JavaScript documentation explicitly demonstrates passing the callback function without parentheses.
What the event object does
The movement function receives information about the mouse event:
function moveLeash(e) {
var mouseX = e.getX();
var mouseY = e.getY();
}
The event object provides the current mouse coordinates through getX() and getY(). CodeHS uses the same pattern in its official mouse event examples.
The important part is that the same coordinates are used twice:
leash.setEndpoint(mouseX, mouseY);
ball.setPosition(mouseX, mouseY);
One update moves the end of the line.
The other moves the ball.
Because both use identical coordinates, they remain visually connected.
Why the graphics objects should be created only once
A common mistake is creating a new ball or line every time the mouse moves.
For example, this is the wrong general approach:
function moveLeash(e) {
var ball = new Circle(30);
ball.setPosition(e.getX(), e.getY());
add(ball);
}
Every mouse event creates another circle.
The screen can quickly fill with old circles because none of them are being updated or removed.
The cleaner pattern is:
Create the objects once
↓
Add them to the canvas
↓
Register the mouse callback
↓
Update the existing objects
That is why ball and leash are declared outside start() in the example.
var ball;
var leash;
Then start() assigns the actual objects:
ball = new Circle(BALL_RADIUS);
leash = new Line(centerX, centerY, centerX, centerY);
The movement function can subsequently access those same objects.
Common 9.7.4 Leash mistakes
The ball does not move
Check the mouse callback first.
You should have something like:
mouseMoveMethod(moveLeash);
Also check that the callback’s name exactly matches the function you created.
The ball moves but the line stays still
The movement function may be updating only the ball:
ball.setPosition(e.getX(), e.getY());
You also need to update the line endpoint:
leash.setEndpoint(e.getX(), e.getY());
The entire line moves
You may be changing the line’s starting point instead of its endpoint.
For the leash effect, the center anchor should stay fixed. Use:
leash.setEndpoint(mouseX, mouseY);
rather than changing the starting coordinates.
The ball and line are disconnected
Make sure both objects receive exactly the same mouse coordinates:
leash.setEndpoint(mouseX, mouseY);
ball.setPosition(mouseX, mouseY);
If one uses different coordinates, even by a small amount, the line and ball can appear separated.
You get an undefined variable error
Check where ball and leash are declared.
If they are declared only inside start():
function start() {
var ball = new Circle(30);
}
the movement function may not have access to that local variable.
Instead, declare the reference outside the function:
var ball;
function start() {
ball = new Circle(30);
}
This allows both functions to refer to the same object.
Nothing happens after registering the mouse event
Check for accidental parentheses:
mouseMoveMethod(moveLeash);
is the callback pattern.
mouseMoveMethod(moveLeash());
is not the same thing.
The line appears above the ball
Graphics layering can affect which object is visually on top. CodeHS documents that graphics objects can have different layer values, with higher layers drawn over lower layers.
A simple approach is to add the leash first and the ball afterward:
add(leash);
add(ball);
That gives the ball a later drawing position in the basic setup.
The shortest way to reason through the problem
Instead of memorizing the entire program, reduce it to four questions.
- Where is the fixed point?
var centerX = getWidth() / 2;
var centerY = getHeight() / 2;
- What represents the leash?
leash = new Line(centerX, centerY, centerX, centerY);
- What represents the moving ball?
ball = new Circle(BALL_RADIUS);
ball.setPosition(centerX, centerY);
- What happens when the mouse moves?
leash.setEndpoint(e.getX(), e.getY());
ball.setPosition(e.getX(), e.getY());
Once those four relationships make sense, the exercise becomes much less about memorizing CodeHS syntax and much more about understanding coordinates.
Why this exercise uses event driven programming
Leash is a small example of event driven programming.
The program does not need to repeatedly ask:
Has the mouse moved?
Has the mouse moved?
Has the mouse moved?
Instead, it registers a callback:
mouseMoveMethod(moveLeash);
CodeHS then invokes that callback when the corresponding event occurs.
This pattern is important because interactive programs rely heavily on events.
The same general idea appears with:
mouseClickMethod(…)
for clicks,
mouseDragMethod(…)
for dragging,
and keyboard event methods for keyboard input. CodeHS’s documentation provides these event callback methods as part of its JavaScript Graphics system.
So Leash is not just about drawing a line. It is an early exercise in connecting user input to changes in program state.
Why 9.7.4 can have a different number in another CodeHS course
If you search for Leash and find references to 4.7.4, 10.7.4, 11.7.4, or other numbers, that does not necessarily mean you found a different programming exercise.
CodeHS uses different course structures.
For example, the current CodeHS listings show Leash as:
- 9.7.4 in Introduction to Computer Science in JavaScript.
- 10.7.4 in Texas Computer Science 1.
- 11.7.4 in Intro to Programming in JavaScript with Arduino.
- 4.7.4 in the Video Game Design in JavaScript course.
- 16.2.4 in Georgia’s Introduction to Digital Technology course.
There are also alternate CodeHS curricula where Leash appears under yet another numbering system.
So the exercise name and your actual assignment instructions matter more than the number alone.
CodeHS Leash methods at a glance
| CodeHS method | 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’s endpoint |
| mouseMoveMethod(function) | Registers the 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 by CodeHS as part of its JavaScript Graphics library.
The key idea to remember
The entire Leash exercise can be reduced to one relationship:
Fixed canvas center
|
| leash line
|
mouse position
|
ball center
The center never changes.
The mouse position changes whenever the user moves the pointer.
The ball center and line endpoint always use that same mouse position.
That is why the objects stay connected.
If you understand that relationship, you understand the main programming concept behind 9.7.4 Leash. The CodeHS Graphics library supplies the necessary primitives and mouse callback system, while your program’s job is to keep the graphical objects synchronized.
You may also read:MiloMagazine