# HOW TO USE createImage()?
**URL:** https://discourse.processing.org/t/how-to-use-createimage/21885
**Category:** Beginners
**Created:** [June 15, 2020, 9:53am UTC](https://discourse.processing.org/t/how-to-use-createimage/21885 "2020-06-15T09:53:55Z")
**Posts on this page:** 16
**Page:** 1
### Author:  [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)
#### Post date: [June 15, 2020, 9:53am UTC](https://discourse.processing.org/t/how-to-use-createimage/21885/1 "2020-06-15T09:53:55Z")
I have an idea where I want user to draw something and make it an image. How to use it, possibly, it has something to do with createImage(), but I’m not familiar with it. Thanks for helping me with it in advance
---
### Author:  [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [June 15, 2020, 10:09am UTC](https://discourse.processing.org/t/how-to-use-createimage/21885/2 "2020-06-15T10:09:36Z")
Hi,
Welcome to the community! 🙂
Because the main canvas already acts as an image, I think that the simple way is just to use the [`save()`](https://p5js.org/reference/#/p5/save) function to save the canvas as an image after the user draw something on the screen :
```auto
function setup() {
createCanvas(400, 400);
// White background
background(255);
}
// Draw a black circle each frame
function draw() {
fill(0);
ellipse(mouseX, mouseY, 10, 10);
}
// If you press enter, save the image
function keyPressed(){
if(keyCode == ENTER){
save("drawing.png");
}
}
```
---
### Author:  [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)
#### Post date: [June 15, 2020, 10:12am UTC](https://discourse.processing.org/t/how-to-use-createimage/21885/3 "2020-06-15T10:12:15Z")
oh, that’s easy; thanks!!!
---
### Author:  [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)
#### Post date: [June 15, 2020, 10:14am UTC](https://discourse.processing.org/t/how-to-use-createimage/21885/4 "2020-06-15T10:14:41Z")
will that image be transparent???
---
### Author:  [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)
#### Post date: [June 15, 2020, 10:22am UTC](https://discourse.processing.org/t/how-to-use-createimage/21885/5 "2020-06-15T10:22:18Z")
@josephh I don’t think so, it will be transparent
Any other way
---
### Author:  [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [June 15, 2020, 10:23am UTC](https://discourse.processing.org/t/how-to-use-createimage/21885/6 "2020-06-15T10:23:06Z")
If you want to make it transparent, the first thing is to save it with the `.png` format for the alpha channel.
Then, on the above example, if you save the image it has a white background because we said that in the `setup()` function. It’s not what we want.
The solution is to only draw your circles on another “buffer” (a p5.Renderer object) by using the [createGraphics()](https://p5js.org/reference/#/p5/createGraphics) function :
```auto
var drawing;
function setup() {
createCanvas(400, 400);
// Create a new buffer with the same size
drawing = createGraphics(width, height);
}
// Draw a black circle each frame
function draw() {
// White background
background(255);
// Call the ellipse function on the drawing buffer
drawing.ellipse(mouseX, mouseY, 10, 10);
// Display the buffer for user feedback
image(drawing, 0, 0);
}
// If you press enter, save the buffer
function keyPressed(){
if(keyCode == ENTER){
drawing.save("drawing.png");
}
}
```
---
### Author:  [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)
#### Post date: [June 15, 2020, 10:25am UTC](https://discourse.processing.org/t/how-to-use-createimage/21885/7 "2020-06-15T10:25:51Z")
@josephh did you right all this now, you’ve got speed!!! Anyways, that’s something I want. thanks for you’re help
---
### Author:  [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [June 15, 2020, 10:27am UTC](https://discourse.processing.org/t/how-to-use-createimage/21885/8 "2020-06-15T10:27:30Z")
Ahah yes it’s real time conversation 😁
Happy coding! 😉
---
### Author:  [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)
#### Post date: [June 15, 2020, 10:30am UTC](https://discourse.processing.org/t/how-to-use-createimage/21885/9 "2020-06-15T10:30:23Z")
@josephh couldn’t be happier!!!
---
### Author:  [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)
#### Post date: [June 15, 2020, 11:56am UTC](https://discourse.processing.org/t/how-to-use-createimage/21885/10 "2020-06-15T11:56:19Z")
@josephh Now, you’re idea perfectly worked… But I want that image to be loaded for a sprite. Clearly, I can’t do it in setup, because it is loaded only once and that too in the beginning. How to solve this??
---
### Author:  [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [June 15, 2020, 12:29pm UTC](https://discourse.processing.org/t/how-to-use-createimage/21885/11 "2020-06-15T12:29:59Z")
@ARNAV_A_GUPTA I don’t really understand your question, you want the user to be able to draw on a buffer that is going to be used for a sprite, is that right?
---
### Author:  [@SomeOne](https://discourse.processing.org/u/SomeOne)
#### Post date: [June 15, 2020, 2:33pm UTC](https://discourse.processing.org/t/how-to-use-createimage/21885/12 "2020-06-15T14:33:35Z")
> [@ARNAV\_A\_GUPTA](#):
>
> Clearly, I can’t do it in setup, because it is loaded only once and that too in the beginning. How to solve this??
You can load images at any time, but because it takes time it’s common practice to load them (once) in setup. You can store image to memory and use it later. Naturally if you need to store the image permanently you need to save it to a file.
---
### Author:  [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)
#### Post date: [June 15, 2020, 3:04pm UTC](https://discourse.processing.org/t/how-to-use-createimage/21885/13 "2020-06-15T15:04:35Z")
yeah! most likely. Kinda like this idea
---
### Author:  [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)
#### Post date: [June 15, 2020, 3:42pm UTC](https://discourse.processing.org/t/how-to-use-createimage/21885/14 "2020-06-15T15:42:43Z")
@josephh point to be noted… How would I use it, it downloads outside the folder…
---
### Author:  [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)
#### Post date: [June 15, 2020, 3:48pm UTC](https://discourse.processing.org/t/how-to-use-createimage/21885/15 "2020-06-15T15:48:41Z")
@SomeOne Yeah, I can do that, but how
like this? =\>
variable = image(img,0,0)
I know it’s wrong but what’s wrong in writing it!!!
---
### Author:  [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)
#### Post date: [June 19, 2020, 8:55am UTC](https://discourse.processing.org/t/how-to-use-createimage/21885/16 "2020-06-19T08:55:56Z")
oh! got it thanks for your help @SomeOne