Skip to main content
TheOriginalGC
Community Expert
TheOriginalGCCommunity Expert
Community Expert
Mar 11, 2025 6:25 PM UTC
Question

Drawing a dynamic curve between two points in javascript

I have an animation of a dog walker and I want to have a dynamic curved line as the leash. So no matter how far the dog moves from the walker, the curved leash is being drawn and updated between them. 

 

In AS3, I did it like this:

 

leash.graphics.clear();

//define curve
leashcurve = 214 + Math.abs(200 - Math.abs(dog.x - walker.x));
leash.graphics.lineStyle(3, 0xAF2525);

//set start point
leash.graphics.moveTo(leashhandx,leashhandy);

//draw curve
leash.graphics.curveTo(leashhandx,leashcurve,leashdogx,leashdogy)

 

Can I do something similar in javascript? I'm having trouble figuring out the syntax.

9 replies

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community Expert
Community Expert
Mar 11, 2025 7:03 PM UTC

Hi.

 

It won't be much different. CreateJS' display objects also have this graphics property in which you can call drawing methods that in general are similar to the AS3 API.

https://createjs.com/docs/easeljs/classes/Graphics.html

Regards,

JC

Translate
TheOriginalGC
Community Expert
TheOriginalGCCommunity ExpertAuthor
Community Expert
Mar 12, 2025 11:57 AM UTC

I seem to be missing something. Using this code from the easeljs page should draw a circle on the screen, but I get nothing. What is missing?

 

var g = new createjs.Graphics();
g.setStrokeStyle(1);
g.beginStroke("#000000");
g.beginFill("red");
g.drawCircle(0,0,30);

Translate
JoãoCésar17023019
Community Expert
JoãoCésar17023019Community Expert
Community Expert
Mar 12, 2025 12:13 PM UTC

You need to attach this Graphics object to a Shape or other display object.

 

For example:

var shape = new createjs.Shape(g);

// or assuming that you already have a instance created
otherShape.graphics = g;

 

And also make sure the shape or other display object is added to the display list.

Translate
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices