# Possibility to avoid redraw with virtual mouse cursor

**URL:** https://discourse.processing.org/t/possibility-to-avoid-redraw-with-virtual-mouse-cursor/21168
**Category:** Coding Questions
**Created:** [May 22, 2020, 4:59pm UTC](https://discourse.processing.org/t/possibility-to-avoid-redraw-with-virtual-mouse-cursor/21168 "2020-05-22T16:59:48Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![monade](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/monade/32/9325_2.png) [@monade](https://discourse.processing.org/u/monade)
#### Post date: [May 22, 2020, 4:59pm UTC](https://discourse.processing.org/t/possibility-to-avoid-redraw-with-virtual-mouse-cursor/21168/1 "2020-05-22T16:59:48Z")

</div>

I am developing a little game with p5.js in which I need to draw my own mouse cursor (for reasons that are not so important). Apart from the mouse cursor, the game has mostly static content and each frame consist of around 1-5 elements (images, basic shapes, text). At the moment, each frame is constantly redrawn.

I realized that the game is pretty CPU heavy, especially in Firefox. I already found out that this becomes (in my case) _not_ better, when I use createGraphics() to create screens already during setup. The problem is not the creation of content, but the constant redrawing.

As far as my understanding goes (I’m very new to p5.js), when using a virtual mouse cursor as in my case, I have no choice to avoid constant redrawing, right? The virtual mouse cursor can be anywhere on the screen, can occlude any element and its position should be constantly updated. Or is there any trick I could pull?

edit: not sure if this is relevant, but the virtual mouse cursor uses requestPointerLock() and is moved according to movedX/movedY

---

<div class="post-metadata">

### Author: ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)
#### Post date: [May 22, 2020, 6:48pm UTC](https://discourse.processing.org/t/possibility-to-avoid-redraw-with-virtual-mouse-cursor/21168/2 "2020-05-22T18:48:22Z")

</div>

Hello @monade,

> [@monade](#):
>
> As far as my understanding goes (I’m very new to p5.js), when using a virtual mouse cursor as in my case, I have no choice to avoid constant redrawing, right?

It’s up to you how often to draw the cursor, but most naturally is to do it once every time `draw` is called. Default is 60 times per second on most computers, but you can change that using the `frameRate()` function.

> [@monade](#):
>
> The virtual mouse cursor can be anywhere on the screen, can occlude any element and its position should be constantly updated. Or is there any trick I could pull?

Redrawing the virtual mouse pointer every frame is reasonable and shouldn’t be heavy on the CPU/GPU. Are you experiencing slowdowns that you think is caused by the mouse drawing routine?

---

<div class="post-metadata">

### Author: ![monade](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/monade/32/9325_2.png) [@monade](https://discourse.processing.org/u/monade)
#### Post date: [May 22, 2020, 7:15pm UTC](https://discourse.processing.org/t/possibility-to-avoid-redraw-with-virtual-mouse-cursor/21168/3 "2020-05-22T19:15:14Z")

</div>

Thanks for your quick reply! I indeed want to redraw the cursor every frame `draw()` is called.

I now realized that I get the heavy CPU (at least with firefox) already when simply having `background(50)` in the draw routine. What matter is mostly not _what_ is drawn, but that _anything_ is drawn. With `background(50)` being called every cycle of `draw()`, Firefox is at around 65% CPU load and Chrome around 15%. If I remove the call to `background(50)`, CPU is not noticable for both browsers. This is on a resonably fast computer (Thinkpad T480s), operating system Linux/Ubuntu and fairly recent stable versions of both browsers.

> [@Sven](#):
>
> Redrawing the virtual mouse pointer every frame is reasonable and shouldn’t be heavy on the CPU/GPU. Are you experiencing slowdowns that you think is caused by the mouse drawing routine?

When you say “redrawing the virtual mouse pointer” you mean redrawing the whole canvas? This was part of my question: whether I can avoid redrawing the other elements, when redrawing the virtual mouse cursor. If I just draw the new mouse cursor on top of the previous draw, the mouse at its old position would also be present.

---

<div class="post-metadata">

### Author: ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)
#### Post date: [May 25, 2020, 12:11pm UTC](https://discourse.processing.org/t/possibility-to-avoid-redraw-with-virtual-mouse-cursor/21168/4 "2020-05-25T12:11:40Z")

</div>

> [@monade](#):
>
> I now realized that I get the heavy CPU (at least with firefox) already when simply having `background(50)` in the draw routine.

If you host a version online, using [https://editor.p5js.org](https://editor.p5js.org) or similar, I can run it on my laptop (Macbook Air) and see if I experience the same thing.

> [@monade](#):
>
> When you say “redrawing the virtual mouse pointer” you mean redrawing the whole canvas?

What I tried to get across is that it is not likely that the portion of code responsible for redrawing the mouse is especially resource hungry. That it’s probably not the reason, your code is running slow. You could avoid redrawing the other elements by drawing them once to an off-screen graphics buffer. [Look up createGraphics](https://p5js.org/reference/#/p5/createGraphics).
