Draw elastic curve in Canvas?

[rvl]

I want to draw a curve that starts at a set location and the endpoint follows the mouse coordinates.  I want the simulate connecting a wire from one point to another. My code does this but it draws multiple curves on the canvas. I need to find a way to clear each curve before the next one is drawn. It breaks when I use graphics.clear(); stage.update();

var startX=150;
var startY=150;
this.addEventListener('tick', drawCurve.bind(this));
function drawCurve(){
var cptX=(stage.mouseX-startX)/3;
var cptY=(stage.mouseY-startY)*4;
var cord1 = new createjs.Shape();
stage.addChild(cord1);
cord1.graphics.setStrokeStyle(4).beginStroke("#ff0000");    
cord1.graphics.moveTo(startX, startY);
cord1.graphics.quadraticCurveTo(cptX, cptY, stage.mouseX, stage.mouseY);
cord1.graphics.endStroke();
cord1.graphics.clear();
stage.update();
}

[kglad · Accepted solution]

use:

var startX=150;
var startY=150;

this.addEventListener('tick', drawCurve.bind(this));

function drawCurve(){

var cptX=(stage.mouseX-startX)/3;
var cptY=(stage.mouseY-startY)*4;
    
var cord1 = new createjs.Shape();
stage.addChild(cord1);
cord1.graphics.setStrokeStyle(4).beginStroke("#ff0000");    
cord1.graphics.moveTo(startX, startY);
cord1.graphics.quadraticCurveTo(cptX, cptY, stage.mouseX, stage.mouseY);
cord1.graphics.endStroke();

cord1.graphics.clear();
stage.update();

}

var startX=150;
var startY=150;

var cord1 = new createjs.Shape();
stage.addChild(cord1);
cord1.graphics.setStrokeStyle(4).

this.addEventListener('tick', drawCurve.bind(this));

function drawCurve(){

var cptX=(stage.mouseX-startX)/3;  // these don't look like they'd be correct.
var cptY=(stage.mouseY-startY)*4;
    /*
these are more likely what you want:
var cptX = startX+(stage.mouseX - startX) / 2;
var cptY = startY+Math.abs(stage.mouseY - startY) * 4;
*/
cord1.graphics.clear();

cord1.graphics.beginStroke("#ff0000");    
cord1.graphics.moveTo(startX, startY);
cord1.graphics.quadraticCurveTo(cptX, cptY, stage.mouseX, stage.mouseY);
cord1.graphics.endStroke();

}

[rvl]

Thanks for your reply.  Did you try this?  It didn't work for me.  No curves were drawn,

[kglad]

remove the typo:

var startX=150;

var startY=150;

var cord1 = new createjs.Shape();

stage.addChild(cord1);

cord1.graphics.setStrokeStyle(4);

this.addEventListener('tick', drawCurve.bind(this));

function drawCurve(){

var cptX=(stage.mouseX-startX)/3;  // these don't look like they'd be correct.

var cptY=(stage.mouseY-startY)*4;

    /*

these are more likely what you want:

var cptX = startX+(stage.mouseX - startX) / 2;

var cptY = startY+Math.abs(stage.mouseY - startY) * 4;

*/

cord1.graphics.clear();

cord1.graphics.beginStroke("#ff0000");   

cord1.graphics.moveTo(startX, startY);

cord1.graphics.quadraticCurveTo(cptX, cptY, stage.mouseX, stage.mouseY);

cord1.graphics.endStroke();

}

[rvl]

It does work! Your changes for the control point is a nice improvement too. Thanks!

[kglad]

you're welcome.