# Possible to restrict mouseDragged to canvas in instance mode?

**URL:** https://discourse.processing.org/t/possible-to-restrict-mousedragged-to-canvas-in-instance-mode/39606
**Category:** Coding Questions
**Created:** [November 7, 2022, 11:07am UTC](https://discourse.processing.org/t/possible-to-restrict-mousedragged-to-canvas-in-instance-mode/39606 "2022-11-07T11:07:16Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![res56](https://avatars.discourse-cdn.com/v4/letter/r/4da419/32.png) [@res56](https://discourse.processing.org/u/res56)
#### Post date: [November 7, 2022, 11:07am UTC](https://discourse.processing.org/t/possible-to-restrict-mousedragged-to-canvas-in-instance-mode/39606/1 "2022-11-07T11:07:16Z")

</div>

Hi frens,  
I want to register the mouseDragged Function to a canvas in instance mode (within a react component).  
But mouseDragged is not available (only mousePressed and mouseClicked…).

Is there a workaround to check if the mouse is dragged inside the canvas?

```auto
var sketch = function( p ) {

  p.setup = function() {
    var cnv = p.createCanvas(700, 410);
    cnv.mouseDragged(doStuff);
  };

  p.draw = function() {
    p.rect(50, 50,50,50);
  };

  function doStuff() {
    p.background(p.random(255));
  }
};

var myp5 = new p5(sketch);

```

Log:  
TypeError: cnv.mouseDragged is not a function

Thanks  
Res

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [November 7, 2022, 1:26pm UTC](https://discourse.processing.org/t/possible-to-restrict-mousedragged-to-canvas-in-instance-mode/39606/2 "2022-11-07T13:26:17Z")

</div>

Hi @res56,

> [@res56](#):
>
> TypeError: cnv.mouseDragged is not a function

`mouseDragged` is not a function on the canvas, it’s a function on the p5 instance:

```javascript
var sketch = function( p ) {

  p.mouseDragged = function() {
    doStuff();
  }

  // ...
};

var myp5 = new p5(sketch);

```

---

<div class="post-metadata">

### Author: ![res56](https://avatars.discourse-cdn.com/v4/letter/r/4da419/32.png) [@res56](https://discourse.processing.org/u/res56)
#### Post date: [November 7, 2022, 2:35pm UTC](https://discourse.processing.org/t/possible-to-restrict-mousedragged-to-canvas-in-instance-mode/39606/3 "2022-11-07T14:35:16Z")

</div>

Hi @josephh

thanks for your reply. This works indeed but then the event is fired outside the canvas…

Thanks

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 7, 2022, 3:12pm UTC](https://discourse.processing.org/t/possible-to-restrict-mousedragged-to-canvas-in-instance-mode/39606/4 "2022-11-07T15:12:17Z")

</div>

> [@res56](#):
>
> Is there a workaround to check if the mouse is dragged inside the canvas?

Maybe you can set a variable mouseDown (that you would create) and then in mousePressed set it to true and in mouseReleased set it to false

Then evaluate it: when it’s true, we drag

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [November 7, 2022, 5:18pm UTC](https://discourse.processing.org/t/possible-to-restrict-mousedragged-to-canvas-in-instance-mode/39606/5 "2022-11-07T17:18:16Z")

</div>

> [@res56](#):
>
> Is there a workaround to check if the mouse is dragged inside the canvas?

Yes - try this

```auto
let mySketch = function (p) {
    mouseOverCanvas = false;
    backCol = 128;

    p.setup = function () {
        let p5canvas = p.createCanvas(300, 200);
        p5canvas.canvas.addEventListener('mouseenter', (e) => { mouseOverCanvas = true; });
        p5canvas.canvas.addEventListener('mouseout', (e) => { mouseOverCanvas = false; });
    }

    p.draw = function () {
        p.background(backCol);
    }

    p.mouseDragged = function () {
        if (mouseOverCanvas)
            backCol = p.floor(p.random(256));
    }

}

new p5(mySketch);

```

---

<div class="post-metadata">

### Author: ![res56](https://avatars.discourse-cdn.com/v4/letter/r/4da419/32.png) [@res56](https://discourse.processing.org/u/res56)
#### Post date: [November 7, 2022, 6:40pm UTC](https://discourse.processing.org/t/possible-to-restrict-mousedragged-to-canvas-in-instance-mode/39606/6 "2022-11-07T18:40:34Z")

</div>

@Chrisir && @quark

works perfect! Thanks