9.7.4 Leash Codehs Answers - Complete JavaScript Solution

If you are looking for 9.7.4 Leash CodeHS answers, this guide explains the exercise, provides a working JavaScript Graphics solution, and breaks down how the ball, leash, and mouse events work together.

The exercise is listed in CodeHS under 9.7 Drawing Lines. The basic goal is to create a ball connected to a line, with the ball following the mouse while the other end of the line remains anchored.

The key idea is simple: the ball’s center and the line’s moving endpoint should use the same mouse coordinates.

What Is 9.7.4 Leash in CodeHS?

9.7.4 Leash is a CodeHS JavaScript Graphics exercise that combines graphical objects with mouse events.

The program creates:

A circular ball
A line representing the leash
A fixed starting point
A moving endpoint controlled by the mouse

As the mouse moves, the ball follows the cursor and the end of the line follows the ball.

What the Leash Exercise Requires

The essential behavior is:

Start the ball near the center of the canvas.
Start the leash from the center.
Keep the starting point of the line fixed.
Track the mouse position.
Move the ball to the mouse position.
Move the line’s endpoint to that same position.

This produces a simple visual relationship:

Fixed point ●────────────● Ball
                         ↑
                      Mouse

Where 9.7.4 Leash Appears in CodeHS

CodeHS currently lists 9.7.4 Leash within the 9.7 Drawing Lines portion of its course structure.

However, students may find older online discussions referring to 4.7.4 Leash. CodeHS has multiple course structures, so exercise numbering can vary. The assignment instructions in the student’s own course should therefore be treated as the final reference.

9.7.4 Leash CodeHS Answer

A straightforward implementation follows the pattern of creating the graphics objects once and then updating them when the mouse moves.

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);
    ball.setColor(Color.yellow);
    add(ball);

    mouseMoveMethod(leash);
}

function leash(e) {
    ball.setPosition(e.getX(), e.getY());
    line.setEndpoint(e.getX(), e.getY());
}

Your course may specify a particular color or slightly different presentation requirements. If so, follow those instructions.

What the Solution Does

The program has two graphics objects:

var ball;
var line;

The start() function creates both objects.

The leash() function then changes their positions whenever the mouse moves.

The most important part is:

ball.setPosition(e.getX(), e.getY());
line.setEndpoint(e.getX(), e.getY());

Both objects use the same X and Y coordinates.

That keeps the ball attached to the end of the line.

Expected Output

At the beginning, the ball and line are positioned at the center.

When you move the mouse:

The center remains fixed while the ball moves around the canvas.

The line stretches between the center and the ball.

How the 9.7.4 Leash Code Works

The solution can be divided into several simple parts.

Creating the Ball

The radius is stored in a variable:

var BALL_RADIUS = 30;

The ball is then created:

ball = new Circle(BALL_RADIUS);

Using a named variable makes the code easier to read and modify.

The ball is initially placed at the center:

ball.setPosition(centerX, centerY);

It is then added to the canvas:

add(ball);

Creating the Leash Line

The line is created with four coordinates:

line = new Line(centerX, centerY, centerX, centerY);

The first two coordinates represent the starting point.

The last two represent the endpoint.

Initially, both are the center of the canvas.

When the mouse moves, only the endpoint changes.

Finding the Center of the Canvas

The center is calculated with:

var centerX = getWidth() / 2;
var centerY = getHeight() / 2;

getWidth() returns the canvas width.

getHeight() returns its height.

Dividing each by two gives the center coordinates.

This is better than assuming a fixed canvas size.

Registering Mouse Movement

The program connects the mouse event to the leash() function:

mouseMoveMethod(leash);

This tells CodeHS to call leash() when the mouse moves.

The function receives the mouse event:

function leash(e) {

The event contains information about the current cursor position.

Moving the Ball With the Mouse

The ball follows the cursor using:

ball.setPosition(e.getX(), e.getY());

e.getX() gives the current horizontal coordinate.

e.getY() gives the current vertical coordinate.

Together, they identify the current mouse position.

Updating the Line Endpoint

The line uses:

line.setEndpoint(e.getX(), e.getY());

This changes only the endpoint of the line.

The starting point remains at the center.

That is what creates the leash effect.

Understanding `setPosition()` and `setEndpoint()`

These two methods are particularly important in this exercise.

How `setPosition()` Moves the Ball

For the ball:

ball.setPosition(e.getX(), e.getY());

setPosition() changes the position of the circle.

The circle’s center is moved to the current mouse coordinates.

How `setEndpoint()` Moves the Line

For the line:

line.setEndpoint(e.getX(), e.getY());

setEndpoint() changes the line’s ending coordinates.

Its starting point remains unchanged.

This is exactly what is needed for a fixed anchor with a moving ball.

Why Both Need the Same Mouse Coordinates

Consider these two statements:

ball.setPosition(e.getX(), e.getY());
line.setEndpoint(e.getX(), e.getY());

They both receive the same coordinates.

Therefore:

Mouse
  ↓
  ● Ball
  ↑
Line endpoint

If different coordinates were used, the ball could appear detached from the leash.

Why `mouseMoveMethod()` Is Important

The program needs to react continuously to mouse movement.

That is what the mouse event handler provides.

How the Mouse Event Works

This statement registers the event:

mouseMoveMethod(leash);

Whenever the cursor moves, CodeHS can invoke the leash() function.

The function then reads the current coordinates and updates the graphics.

Understanding the Event Object

The parameter:

represents the mouse event.

It provides information about where the cursor currently is.

For this exercise, the most important methods are:

e.getX()
e.getY()

Using `getX()` and `getY()`

getX() returns the mouse’s horizontal position.

getY() returns its vertical position.

Together they give the point to which both the ball and line endpoint should move.

Why the Ball and Line Variables Must Be Accessible

The program creates the objects in start() but updates them later in leash().

That is why the variables are declared outside start():

var ball;
var line;

Creating the Objects Once

The objects are created once:

ball = new Circle(BALL_RADIUS);
line = new Line(centerX, centerY, centerX, centerY);

They are then reused.

This is simpler and more efficient than creating new objects whenever the mouse moves.

Updating Existing Objects Instead of Creating New Ones

The mouse function should update the existing objects:

ball.setPosition(...);
line.setEndpoint(...);

It should not repeatedly create:

new Circle(...)
new Line(...)

during every mouse event.

Otherwise, the canvas could accumulate unnecessary objects.

Why Multiple Objects Can Cause Problems

If a new ball or line is added on every mouse movement, you may see:

Multiple balls
Multiple lines
Trails across the screen
Slower graphics
Unexpected visual behavior

For this exercise, the cleaner model is:

Create once → move repeatedly.

Common 9.7.4 Leash CodeHS Errors

Even when the basic concept is simple, several mistakes can prevent the program from behaving correctly.

The Ball Moves but the Line Does Not

Check that your mouse handler contains:

line.setEndpoint(e.getX(), e.getY());

Moving only the ball will not automatically move the line.

Both objects need to be updated.

The Line Moves but the Ball Does Not

Make sure the callback also contains:

ball.setPosition(e.getX(), e.getY());

The ball and endpoint should receive the same coordinates.

The Ball and Line Are Not Connected

This usually happens when the ball and line endpoint use different coordinates.

Use:

ball.setPosition(e.getX(), e.getY());
line.setEndpoint(e.getX(), e.getY());

The same mouse position controls both.

Nothing Happens When the Mouse Moves

Check the event registration:

mouseMoveMethod(leash);

Also make sure the function exists:

function leash(e) {
    ...
}

A common mistake is writing:

mouseMoveMethod(leash());

instead of:

mouseMoveMethod(leash);

The callback should be passed as a function reference.

Multiple Mouse Handlers Cause Unexpected Results

A student discussion about the Leash exercise shows a common approach where separate mouse handlers were considered for different parts of the program.

For this exercise, putting both updates into one function is simpler:

function leash(e) {
    ball.setPosition(e.getX(), e.getY());
    line.setEndpoint(e.getX(), e.getY());
}

Then register that function once:

mouseMoveMethod(leash);

This keeps all mouse-dependent behavior together.

The Line Appears Above the Ball

Graphics draw order can affect how objects overlap.

If you want the ball to appear above the line, add the line first:

add(line);
add(ball);

The ball is then added afterward and can visually cover the line where they overlap.

9.7.4 Leash vs. 4.7.4 Leash

One of the biggest sources of confusion is that online search results may use different exercise numbers.

Some older student discussions refer to 4.7.4 Leash, while current CodeHS course material can identify the exercise as 9.7.4 Leash.

Why Different CodeHS Courses Use Different Numbers

CodeHS has multiple courses and course versions.

As a result, an exercise can appear at different positions within different curriculum structures.

This means the number alone should not be treated as proof that two assignments are identical.

How to Check Which Leash Exercise You Have

Compare the instructions in your CodeHS account.

Look for the requirements involving:

A ball
A line
A fixed center point
Mouse movement
A moving ball
A line endpoint following the ball

The actual assignment instructions are more important than the number displayed in an old search result.

Does the Solution Change Between Course Versions?

The underlying programming concept can remain the same even when the exercise number changes.

However, the exact requirements may differ between courses.

For that reason, don’t blindly paste an old answer simply because it says “Leash.”

Check the required radius, color, starting position, variable names, and other instructions in your current assignment.

How to Test Your CodeHS Leash Program

Testing the visual behavior is just as important as checking whether the program compiles.

Check the Starting Position

When the program begins:

The ball should appear at the intended starting location.
The line should begin at the required anchor.
The ball should be positioned at the moving end of the line.

Test Mouse Movement

Move your cursor around the canvas.

The ball should continuously follow the cursor.

Check the Fixed Line Endpoint

The line’s starting point should remain fixed.

Only the endpoint should move.

If the entire line appears to move around without maintaining its anchor, check which coordinates you are changing.

Look for Duplicate Graphics Objects

Move the cursor around several times.

If you see multiple balls or a trail of lines, the program may be creating new objects instead of moving the existing ones.

What Skills Does the Leash Exercise Teach?

Although the assignment is short, it combines several important programming concepts.

JavaScript Graphics Objects

You work with objects such as:

Circle
Line

You then modify their properties through methods.

Mouse Events and Event Handlers

The exercise introduces event-driven programming through:

mouseMoveMethod(leash);

The program responds to user input rather than simply executing from top to bottom once.

X and Y Coordinates

The exercise reinforces coordinate systems through:

e.getX()
e.getY()

You learn how a graphical object’s location can be controlled using coordinates.

Updating Objects Dynamically

Instead of recreating graphics, the program modifies existing objects:

ball.setPosition(...);
line.setEndpoint(...);

This is an important pattern used throughout interactive programming.

Frequently Asked Questions About 9.7.4 Leash

What is 9.7.4 Leash in CodeHS?

It is a CodeHS JavaScript Graphics exercise involving a ball, a line, and mouse movement. The ball follows the cursor while the line remains attached to it.

What is the answer to 9.7.4 Leash?

A typical solution creates one Circle and one Line, then uses a mouse-movement function to update the ball position and line endpoint with the current mouse coordinates.

The exact requirements of your CodeHS assignment should always take priority.

What does `mouseMoveMethod()` do in CodeHS?

It registers a function that responds to mouse movement.

For example:

mouseMoveMethod(leash);

causes the leash function to respond to mouse movement events.

What does `setEndpoint()` do?

setEndpoint(x, y) changes the ending point of a line.

In the Leash exercise, it moves the free end of the leash toward the current mouse position.

Why does the ball need to follow the mouse?

Following the mouse is what creates the interactive part of the exercise.

The cursor determines the moving point, while the center remains the fixed anchor.

Why does my CodeHS leash line not move?

Check that your mouse callback includes:

line.setEndpoint(e.getX(), e.getY());

Also make sure the callback is registered correctly.

Is 4.7.4 Leash the same as 9.7.4 Leash?

The exercise numbers can vary between CodeHS course structures and older materials.

Some online discussions use 4.7.4, while current course structures may use 9.7.4.

Always compare the actual assignment instructions before assuming that two numbered exercises are identical.

What programming language does CodeHS Leash use?

The exercise uses JavaScript with CodeHS Graphics.

Final Takeaway on 9.7.4 Leash CodeHS

The central idea behind 9.7.4 Leash is straightforward:

Create the graphics once, then update them whenever the mouse moves.

The two most important statements are:

ball.setPosition(e.getX(), e.getY());
line.setEndpoint(e.getX(), e.getY());

Both use the same mouse coordinates, which keeps the ball attached to the moving end of the line.

The exercise also teaches several concepts that are useful beyond this one assignment: JavaScript graphics objects, coordinates, event handlers, callback functions, and dynamic object updates.

If you encounter an older search result labeled 4.7.4 Leash, compare its instructions with your current CodeHS assignment rather than relying solely on the exercise number. CodeHS uses multiple curriculum structures, so numbering can differ.

The most useful way to understand the solution is to remember the underlying model:

fixed anchor + moving mouse point + line connecting them + ball positioned at the moving point.