# Working with mouseDragged() and other mouse events inside a class

**URL:** <https://discourse.processing.org/t/working-with-mousedragged-and-other-mouse-events-inside-a-class/2829>\
**Category:** Coding Questions\
**Created:** [August 22, 2018, 2:04am UTC](https://discourse.processing.org/t/working-with-mousedragged-and-other-mouse-events-inside-a-class/2829 "2018-08-22T02:04:55Z")\
**Posts on this page:** 1\
**Showing post:** 6

<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:** [August 22, 2018, 7:38am UTC](https://discourse.processing.org/t/working-with-mousedragged-and-other-mouse-events-inside-a-class/2829/6 "2018-08-22T07:38:08Z")

</div>

- Each instance of p5 got a [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas) element ([HTMLCanvasElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement)) attached to it.
- Just like a Processing Java Mode’s [PApplet](https://processing.org/reference/) got a canvas ([PGraphics](https://processing.org/reference/PGraphics.html)) as well.
- When we call **[createCanvas()](https://p5js.org/reference/#/p5/createCanvas)**, it returns a [p5.Renderer](https://p5js.org/reference/#/p5.Renderer) object; which is a subclass of [p5.Element](https://p5js.org/reference/#/p5.Element) btW.
- Besides the main [`<canvas>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas), we can create additional offscreen canvases via **[createGraphics()](https://p5js.org/reference/#/p5/createGraphics)**.
- However, it returns a hackish wrapper [p5.Graphics](https://p5js.org/reference/#/p5.Graphics) instead of an actual [p5.Renderer](https://p5js.org/reference/#/p5.Renderer)!
- A [p5.Graphics](https://p5js.org/reference/#/p5.Graphics) got all of the properties of a [p5](https://p5js.org/reference/#/p5) instance, besides those inherited by [p5.Element](https://p5js.org/reference/#/p5.Element).
- We can even access _[TAU](https://p5js.org/reference/#/p5/TAU)_ and call **[random()](https://p5js.org/reference/#/p5/random)**, **[cos()](https://p5js.org/reference/#/p5/cos)**, etc. from it!
- Notice in my online sketch [“Rotating Cube”](https://bl.ocks.org/GoSubRoutine/a117ecb16a8b0f939a190f87d3a13267), I’m calling **[mouseMoved()](https://p5js.org/reference/#/p5.Element/mouseMoved)** method over the [p5.Renderer](https://p5js.org/reference/#/p5.Renderer) object returned by **[createCanvas()](https://p5js.org/reference/#/p5/createCanvas)**.

---

_[View the full topic](https://discourse.processing.org/t/working-with-mousedragged-and-other-mouse-events-inside-a-class/2829)._