# EndShape call inside mouseDragged doesn't work in instanciated mode

**URL:** <https://discourse.processing.org/t/endshape-call-inside-mousedragged-doesnt-work-in-instanciated-mode/26413>\
**Category:** Coding Questions\
**Created:** [December 21, 2020, 10:13am UTC](https://discourse.processing.org/t/endshape-call-inside-mousedragged-doesnt-work-in-instanciated-mode/26413 "2020-12-21T10:13:47Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nahiko](https://avatars.discourse-cdn.com/v4/letter/n/d78d45/32.png) [@nahiko](https://discourse.processing.org/u/nahiko)\
**Post date:** [December 21, 2020, 10:13am UTC](https://discourse.processing.org/t/endshape-call-inside-mousedragged-doesnt-work-in-instanciated-mode/26413/1 "2020-12-21T10:13:47Z")

</div>

Hi guys,

It’s all in the title, here is an example of the code:

var s1 = function( sketch ) {  
sketch.setup = function() {  
let canvas1 = sketch.createCanvas(400, 400, sketch.WEBGL);  
canvas1.position(0,0);  
canvas1.background(“blue”);  
}  
sketch.mousePressed = function(){  
sketch.beginShape();  
sketch.fill(“green”);  
}

sketch.mouseDragged = function(){  
sketch.curveVertex(sketch.mouseX-200,sketch.mouseY-200);  
}  
sketch.mouseReleased = function(){  
sketch.endShape();

}

};  
new p5(s1);  
var s2 = function( sketch ) {  
sketch.setup = function() {  
var canvas1 = sketch.createCanvas(400, 400, sketch.WEBGL);  
canvas1.position(400,0);  
canvas1.background(0,0,0,0);  
}  
sketch.mousePressed = function(){  
sketch.beginShape();  
sketch.fill(“yellow”);  
}

sketch.draw = function(){  
sketch.curveVertex(sketch.mouseX-205,sketch.mouseY-200);  
sketch.endShape();

}  
sketch.mouseReleased = function(){  
}

};

// create the second instance of p5 and pass in the function for sketch 2  
new p5(s2);

So for example the EndShape call in mouseReleased in this example works, but not the one in mouseDragged.

Hopefully someone has an answer !  
Thanks !

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 21, 2020, 10:31am UTC](https://discourse.processing.org/t/endshape-call-inside-mousedragged-doesnt-work-in-instanciated-mode/26413/2 "2020-12-21T10:31:16Z")

</div>

> <https://github.com/processing/p5.js/issues/4960>
>
> Hi guys !
> This is my code:
> var s1 = function( sketch ) {
> sketch.setup = function() {
> let canvas1 = sketch.createCanvas(400, 400, sketch.WEBGL);
> canvas1.position(0,0);
> canvas1.background("blue");
> }
> sketch.mousePressed =...

---

<div class="post-metadata">

**Author:** ![nahiko](https://avatars.discourse-cdn.com/v4/letter/n/d78d45/32.png) [@nahiko](https://discourse.processing.org/u/nahiko)\
**Post date:** [December 21, 2020, 3:18pm UTC](https://discourse.processing.org/t/endshape-call-inside-mousedragged-doesnt-work-in-instanciated-mode/26413/3 "2020-12-21T15:18:54Z")

</div>

Yes that’s the github issue I opened too !

Also, the code is obviously wrong in my example here, it’s not sketch.draw, but sketch.mouseDragged.

I tried a couple things before posting 😉

---

<div class="post-metadata">

**Author:** ![nahiko](https://avatars.discourse-cdn.com/v4/letter/n/d78d45/32.png) [@nahiko](https://discourse.processing.org/u/nahiko)\
**Post date:** [December 21, 2020, 3:26pm UTC](https://discourse.processing.org/t/endshape-call-inside-mousedragged-doesnt-work-in-instanciated-mode/26413/4 "2020-12-21T15:26:39Z")

</div>

Just did some more tests,  
It seems that if I use a delay on the EndShape function I do get something drawn.  
It’s as if after using Endshape once, I can’t use it anymore.

What I don’t understand is that I can use EndShape this way when I use p5js in regular mode.