Drawing a dynamic curve between two points in javascript

Forum|Forum|10 months ago
March 11, 2025
1 reply
843 views

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.

Code

JoãoCésar17023019

Community Expert

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

TheOriginalGC

Author

Community Expert

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);

JoãoCésar17023019

Community Expert

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded