# P5.play - Create Sprite on a drawing canvas

**URL:** <https://discourse.processing.org/t/p5-play-create-sprite-on-a-drawing-canvas/17111>\
**Category:** Libraries\
**Created:** [January 15, 2020, 11:59pm UTC](https://discourse.processing.org/t/p5-play-create-sprite-on-a-drawing-canvas/17111 "2020-01-15T23:59:26Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![criacuervos](https://avatars.discourse-cdn.com/v4/letter/c/8c91f0/32.png) [@criacuervos](https://discourse.processing.org/u/criacuervos)\
**Post date:** [January 15, 2020, 11:59pm UTC](https://discourse.processing.org/t/p5-play-create-sprite-on-a-drawing-canvas/17111/1 "2020-01-15T23:59:26Z")

</div>

Hi everyone,

I’m trying to figure out if it is possible to use createSprite/makeSprite from the p5.play library and render that on top of a drawing canvas I already have.

Right now I call `drawSprites()` inside the `draw()` function, and the problem I’m running into is that when I include the background color in `setup()`, you can draw (with mousePressed) just fine, but the sprites (which are moved with arrow keys) leave a trail across the page. When the background color is in `draw()`, then the sprites no longer leave a trail, but of course the drawings are drawn over with the background.

What is the solution to this? Is there a solution to this? Any help is appreciated

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 16, 2020, 12:53am UTC](https://discourse.processing.org/t/p5-play-create-sprite-on-a-drawing-canvas/17111/2 "2020-01-16T00:53:50Z")

</div>

when use  
background in DRAW()

> drawing mode

the canvas is cleared and you have to draw all again,  
( means also you have to remember all what you need to draw like by array or arraylist / for loops )  
and the draw will show it ( at about 60 times per sec. )

* * *

without background you are in

> painting mode

means the canvas is your memory  
and you only have to ADD something.  
( still on keyPressed ‘c’ can do a single `background(0);` for reset )

---

<div class="post-metadata">

**Author:** ![criacuervos](https://avatars.discourse-cdn.com/v4/letter/c/8c91f0/32.png) [@criacuervos](https://discourse.processing.org/u/criacuervos)\
**Post date:** [January 16, 2020, 1:56am UTC](https://discourse.processing.org/t/p5-play-create-sprite-on-a-drawing-canvas/17111/3 "2020-01-16T01:56:47Z")

</div>

hi,  
im sorry this reply didnt make total sense to me. im still not sure what to do. could you explain a little bit more some actions i should take?

so i should set the background in `draw()`, and then store the history of where the mouse has been clicked and display that also in `draw()`?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 16, 2020, 2:14am UTC](https://discourse.processing.org/t/p5-play-create-sprite-on-a-drawing-canvas/17111/4 "2020-01-16T02:14:06Z")

</div>

that would depend on WHAT you draw now at `mousePressed()`  
if you draw like a single rectangle at each click, yes , remember the mouse position to a array ( best of PVector )  
and in draw make a for loop over the array and draw all the rectangles you remembered.

why you not link to your project?

* * *

but not all is black or white,  
there is a way to combine painting with drawing,  
if you paint on ( to ) a extra graphic buffer ( and not to canvas )  
[https://editor.p5js.org/kll/sketches/SmXp0Neo9](https://editor.p5js.org/kll/sketches/SmXp0Neo9)

---

<div class="post-metadata">

**Author:** ![criacuervos](https://avatars.discourse-cdn.com/v4/letter/c/8c91f0/32.png) [@criacuervos](https://discourse.processing.org/u/criacuervos)\
**Post date:** [January 16, 2020, 3:16am UTC](https://discourse.processing.org/t/p5-play-create-sprite-on-a-drawing-canvas/17111/5 "2020-01-16T03:16:11Z")

</div>

here is my project: [https://ansible-web.herokuapp.com/](https://ansible-web.herokuapp.com/)

ii want it so that you are both able to move around a sprite (rectangle) on the same space that you draw on. i stored all the lines drawn into an array which get rendered in a loop inside of the `draw()` function. that way, you do not see the trail the sprite was leaving behind.

right now i havent transmitted the sprite movements to the server yet so you cannot see other people move. i will also be adding some collision. my idea in the long run was to try to add collision to HTML objects.

---

<div class="post-metadata">

**Author:** ![criacuervos](https://avatars.discourse-cdn.com/v4/letter/c/8c91f0/32.png) [@criacuervos](https://discourse.processing.org/u/criacuervos)\
**Post date:** [January 16, 2020, 3:28am UTC](https://discourse.processing.org/t/p5-play-create-sprite-on-a-drawing-canvas/17111/6 "2020-01-16T03:28:06Z")

</div>

[https://github.com/criacuervos/ansible](https://github.com/criacuervos/ansible)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 16, 2020, 3:29am UTC](https://discourse.processing.org/t/p5-play-create-sprite-on-a-drawing-canvas/17111/7 "2020-01-16T03:29:26Z")

</div>

get error on that one?, pls repair

---

<div class="post-metadata">

**Author:** ![criacuervos](https://avatars.discourse-cdn.com/v4/letter/c/8c91f0/32.png) [@criacuervos](https://discourse.processing.org/u/criacuervos)\
**Post date:** [January 16, 2020, 3:37am UTC](https://discourse.processing.org/t/p5-play-create-sprite-on-a-drawing-canvas/17111/8 "2020-01-16T03:37:36Z")

</div>

sorry, am new to sharing, i dont think i ever have before. you can click the link and see the source code but im not sure how you can host it on your own.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 16, 2020, 3:45am UTC](https://discourse.processing.org/t/p5-play-create-sprite-on-a-drawing-canvas/17111/9 "2020-01-16T03:45:29Z")

</div>

no, not see source code,  
get 404 error here? is it a private ( payed ) github account or just a network error?