The 9.7.4 Leash CodeHS exercise is a JavaScript graphics activity that helps students understand mouse movement, object positioning, and interactive programming. Although the assignment looks simple, beginners sometimes struggle to make the ball follow the cursor while keeping the leash connected to the center of the screen.
The exercise requires students to create a ball using a Circle object and connect it to a fixed point using a Line object. When the mouse moves, the ball follows its position, and the leash stretches between the ball and the center of the canvas.
This guide explains the complete 9.7.4 Leash CodeHS solution, the important JavaScript functions, common errors, and practical troubleshooting techniques. Whether you’re completing the exercise for the first time or trying to fix code that isn’t working, understanding the logic will make the assignment much easier.
What Is 9.7.4 Leash CodeHS?
The 9.7.4 Leash CodeHS exercise is an interactive programming assignment commonly associated with JavaScript graphics lessons. Its purpose is to teach students how graphical objects respond to mouse movements.
Instead of displaying text or performing mathematical calculations, the program creates objects that move across a graphics canvas.
The activity uses two main objects: a circle representing a ball and a line representing its leash. One end of the leash remains fixed at the canvas center, while the other follows the ball.
Students learn how to create graphics, work with coordinates, and respond to events. These skills are useful when developing animations, simple games, and interactive applications.
Understanding the Leash Assignment Requirements
Before writing code, it’s important to understand what the completed program should accomplish.
The ball must initially appear at the center of the graphics canvas. The leash should also begin at the center, with both endpoints occupying the same location.
When the user moves the mouse, the ball should immediately follow the cursor. At the same time, the moving endpoint of the leash must update to match the ball’s position.
The opposite endpoint must remain fixed.
This behavior creates the appearance of a ball attached to a leash that stretches as the cursor moves farther away.
The most important requirement is keeping the ball and the moving endpoint synchronized. If their coordinates differ, the leash will appear disconnected.
Quick Bio Information About 9.7.4 Leash CodeHS
The following reference table summarizes the important technical facts about the exercise.
| Information | Details |
|---|---|
| Exercise Name | Leash |
| Common Exercise Number | 9.7.4 |
| Learning Platform | CodeHS |
| Programming Language | JavaScript |
| Programming Environment | CodeHS JavaScript Graphics |
| Exercise Category | Interactive Graphics |
| Main Objective | Make a ball follow mouse movement |
| Ball Object | Circle |
| Leash Object | Line |
| Starting Position | Canvas Center |
| Fixed Anchor | Center of the Canvas |
| Moving Object | Ball |
| Mouse Event Method | mouseMoveMethod() |
| Ball Movement Method | setPosition() |
| Leash Movement Method | setEndpoint() |
| Horizontal Coordinate | e.getX() |
| Vertical Coordinate | e.getY() |
| Main Function | start() |
| Core Programming Concept | Event-Driven Programming |
| Related Exercise Reference | 4.7.4 Leash in some older materials |
These details describe the JavaScript graphics version of the assignment. Exercise numbering and requirements can vary between CodeHS courses.
Complete 9.7.4 Leash CodeHS JavaScript Solution
The following JavaScript example demonstrates the required behavior using CodeHS graphics functions.
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);
ball.setColor(Color.yellow);
add(ball);
mouseMoveMethod(moveLeash);
}
function moveLeash(e) {
var mouseX = e.getX();
var mouseY = e.getY();
leash.setEndpoint(mouseX, mouseY);
ball.setPosition(mouseX, mouseY);
}The program creates the leash and ball when it starts. Both objects begin at the center of the canvas.
The mouseMoveMethod() function registers a callback that responds whenever the mouse moves. Inside that callback, the program reads the mouse coordinates and updates the ball and leash.
Notice that the line is added before the ball. This helps the circle appear visually above the leash.
The example follows the documented CodeHS graphics programming approach, although students should compare it with the exact requirements shown in their course.
How the 9.7.4 Leash JavaScript Code Works
Understanding the individual parts of the program is more useful than memorizing the complete solution.
The first statement creates a variable called BALL_RADIUS and assigns it a value of 30. This determines the size of the circle.
Next, the program declares the ball and leash variables. These variables store references to the graphical objects so other functions can update them.
Inside start(), the program calculates the center of the canvas using getWidth() and getHeight(). Dividing each measurement by two produces the horizontal and vertical center coordinates.
The Line constructor creates the leash using four coordinate values. Its starting and ending points initially share the same position.
The Circle constructor creates the ball, while setPosition() places it at the center.
Finally, the program registers moveLeash as the mouse movement callback. This function handles the interactive behavior after initialization.
Understanding Important CodeHS Graphics Functions
Several JavaScript graphics methods work together to complete the Leash exercise.
The Circle() constructor creates a circular object with a specified radius. The Line() constructor creates a straight line between two coordinate points.
The getWidth() and getHeight() functions return the dimensions of the graphics canvas. They allow the program to calculate the center without assuming a particular screen size.
The setPosition() method changes the position of the circle. For CodeHS Circle objects, this position represents the circle’s center.
The setEndpoint() method changes the ending point of a Line object without changing its starting point.
Meanwhile, mouseMoveMethod() registers a function that runs when mouse movement occurs.
The event methods getX() and getY() provide the cursor’s coordinates. Using these values consistently allows the ball and leash to move together.
How Mouse Movement Works in 9.7.4 Leash
Mouse movement is the main interactive feature of the assignment.
In event-driven programming, the program responds to user actions rather than repeatedly running the same movement instructions.
The statement mouseMoveMethod(moveLeash); tells CodeHS which function should handle mouse movement.
Whenever the cursor moves over the graphics canvas, CodeHS calls the registered function and supplies an event object.
The callback reads the event’s X and Y coordinates, then uses those values to reposition the ball and the moving endpoint of the leash.
One common mistake is writing mouseMoveMethod(moveLeash()); with parentheses after the callback name.
That version attempts to execute the function immediately instead of passing it as a callback reference.
For this exercise, the function name should be passed without parentheses.
Understanding Canvas Coordinates and Object Positioning
Every graphical object needs coordinates that determine where it appears on the canvas.
The horizontal position is represented by X, while the vertical position is represented by Y.
In the usual CodeHS graphics coordinate system, the origin is at the upper-left corner. X increases toward the right, and Y increases downward.
The center is calculated by dividing the canvas width and height by two.
For example, a canvas measuring 400 pixels wide and 500 pixels tall has a center at X = 200 and Y = 250.
The Leash program uses this center as its fixed anchor.
When the cursor moves, its coordinates become the new position of the ball and the moving endpoint of the line.
Because both objects use identical coordinates, they remain connected regardless of where the cursor moves.
Why the Ball and Leash Must Move Together
The most important concept in the 9.7.4 Leash CodeHS solution is synchronized movement.
Although the ball and leash are separate graphical objects, the program makes them behave as though they’re physically connected.
The line has a fixed starting point and a moving endpoint. The circle has a center position that changes whenever the mouse moves.
Both moving positions must receive the same X and Y values.
If the circle updates without the line, the ball moves away while the leash stays behind. If only the line updates, the leash stretches toward the cursor without moving the ball.
Using the same event coordinates solves both problems.
This approach introduces an important programming technique: coordinating multiple objects through shared information.
Common 9.7.4 Leash CodeHS Errors and Fixes
Even a short graphics program can produce unexpected results when a function or coordinate is incorrect.
If the ball doesn’t move, check whether mouseMoveMethod() has been registered properly and whether the callback updates the circle’s position.
If the leash doesn’t follow the ball, confirm that the program uses setEndpoint() to update the line’s ending point.
If the entire line moves, the program may be changing its starting point instead of preserving the center anchor.
Another common problem occurs when students create new circles inside the mouse callback. Each movement can produce another graphical object, leaving multiple balls on the canvas.
The better approach is to create the objects once inside start() and update their positions afterward.
Students should also check for misspelled function names, missing parentheses, and incorrect variable references.
Fixing Graphics Layering and Drawing Order Problems
Sometimes the program works correctly, but the leash appears on top of the ball.
This is usually a drawing-order issue rather than a movement problem.
Graphics objects can overlap, and their visual order affects which object appears in front.
In the example solution, the program adds the leash before adding the ball.
This arrangement helps the ball appear above the line, creating a more natural appearance.
CodeHS graphics environments may also provide layering controls for managing overlapping objects.
For the basic Leash exercise, keeping the drawing order simple is usually enough.
Students should remember that a visual layering problem doesn’t necessarily mean the mouse movement code is incorrect.
Why Creating Graphics Objects Only Once Matters
A clean Leash solution separates object creation from object movement.
The start() function creates the ball and leash when the program begins. Afterward, the mouse callback changes their existing positions.
This design prevents unnecessary objects from accumulating on the canvas.
It also makes the program easier to understand because initialization and interaction have separate responsibilities.
The variables ball and leash continue referring to the same objects after start() finishes.
When the cursor moves, the callback uses those references to update the existing graphics.
This pattern is common in interactive programming and becomes especially useful when students begin working with animations, moving characters, and simple games.
Difference Between 9.7.4 Leash and 4.7.4 Leash
Students searching for CodeHS Leash answers may encounter references to both 9.7.4 Leash and 4.7.4 Leash.
These numbers can appear in different course versions or older learning materials.
Some versions describe similar JavaScript graphics behavior involving a Circle, a Line, mouse movement, and a fixed anchor point.
However, students shouldn’t assume that exercises with different numbers always have identical requirements.
The safest approach is to compare the actual assignment instructions.
If the exercise asks for a ball that follows the cursor while remaining connected to the center of the canvas, the JavaScript graphics concepts explained here are relevant.
How to Test and Improve Your Leash Program
Testing is an important part of completing the 9.7.4 Leash CodeHS assignment.
After running the program, check whether the ball begins at the canvas center.
Move the cursor horizontally and vertically, then toward different corners of the graphics area.
The ball should follow the cursor, and the moving endpoint of the leash should remain connected to its center.
The opposite endpoint should stay fixed.
If the program behaves incorrectly, inspect the mouse callback, coordinate values, and graphics methods before rewriting the entire solution.
Once the required behavior works, students can experiment with the ball’s size or color to understand how graphical properties affect the output.
These small changes provide useful practice without changing the main movement logic.
What Programming Skills Does the Leash Exercise Teach?
The Leash exercise introduces several concepts that extend beyond a single CodeHS assignment.
Students practice event-driven programming by responding to mouse movement. They also learn how variables store references to graphical objects and how functions update object properties.
Working with canvas coordinates strengthens their understanding of positioning and movement.
The exercise also demonstrates synchronization, where separate objects respond to the same event data.
These concepts appear in drawing applications, interactive websites, educational simulations, and basic games.
By understanding how the ball and leash work together, students develop a foundation for more advanced JavaScript graphics programming.
FAQs About 9.7.4 Leash CodeHS
What Is the Correct Answer to 9.7.4 Leash CodeHS?
The JavaScript graphics solution creates a Circle and a Line, positions them at the canvas center, and registers a mouse movement callback. The callback updates the ball’s position and the line’s moving endpoint using the same mouse coordinates while keeping the other endpoint fixed.
Why Is My Ball Not Moving in CodeHS Leash?
The problem may involve an incorrectly registered mouse callback, a misspelled function name, or a missing setPosition() statement. Check that mouseMoveMethod() receives the correct function reference and that the callback reads the mouse coordinates.
Why Is My Leash Line Not Following the Mouse?
The line may not move because the program isn’t updating its endpoint. Use setEndpoint() with the mouse’s X and Y coordinates. Make sure the same coordinates are also used to update the ball.
What Does mouseMoveMethod() Do in CodeHS?
The mouseMoveMethod() function registers a callback that responds to mouse movement. Whenever the mouse moves within the graphics canvas, CodeHS calls the registered function and supplies event information that the program can use to update graphical objects.
What Is the Difference Between setPosition() and setEndpoint()?
In this exercise, setPosition() moves the Circle to a new location. The Line’s setEndpoint() method changes its ending point while preserving its starting point. Using the correct method for each object keeps the leash anchored and connected.
Why Does the Leash Appear Over the Ball?
The line may appear above the ball because of the order in which graphical objects are added. Adding the line first and the ball afterward can help the circle appear in front. Graphics layering controls may also affect the result.
Is 4.7.4 Leash the Same as 9.7.4 Leash?
Some older CodeHS materials describe a similar Leash graphics activity under the 4.7.4 numbering. However, course versions can differ, so students should compare the assignment instructions rather than assuming the exercises are identical.
Can I Change the Ball Color or Size?
Yes. The ball’s radius can be adjusted through the BALL_RADIUS variable, and its color can be changed using setColor(). These changes are useful for experimenting with JavaScript graphics, although students should follow any specific appearance requirements in their assignment.
Final Thoughts
The 9.7.4 Leash CodeHS exercise is a practical introduction to JavaScript graphics, mouse events, and coordinate-based movement. Its main challenge is keeping a moving ball connected to a line while preserving a fixed anchor point.
The solution becomes easier once students understand how Circle(), Line(), mouseMoveMethod(), setPosition(), and setEndpoint() work together.
Rather than simply copying the code, take time to understand how the objects are created, how mouse coordinates are collected, and why both moving positions must stay synchronized.
These skills provide a useful starting point for building interactive graphics, animations, and more advanced JavaScript projects.
Learn more and explore exciting content on: Okfrut Explained: Drinks, Ingredients, Benefits, and More
Leave a Reply