Is it possible to create transparent canvas

Question

I am developing a paint brush application in javascript using processing.js It is using a canvas object. I want to keep an image at the background of the canvas. Draw something in the foreground. And while saving i need to get only foreground data.

For that we need to make canvas object transparent so that background image is visible.

I don't see any option to make the canvas transparent. How do I do that?

The correct answer for this was Jared's. Why? Because the original poster said he needed it to be done with *ProcessingJS*, which renders all canvas elements with gray background as *default*. He wants to override this default behavior. — YOMorales, Jun 25 '11 at 22:30

score 13 · Answer 1 · edited Sep 27 '16 at 11:24

13

Even better, at the top of your pjs just put:

/* @pjs transparent=true; */

... and then in your draw loop:

background(0, 0, 0, 0);

voila!

edited Sep 27 '16 at 11:24

sphinks

3,048
8
39
55

answered Dec 02 '10 at 22:16

Jared

1,724
12
16

4

Correct answer when using *ProcessingJS*. It also solved my problems. – YOMorales Jun 25 '11 at 22:31

Irae Carvalho · Answer 2 · 2011-07-02T00:45:24.833

6

<canvas> is transparent by default.

I've made a proof of concept that can be found here:

http://irae.pro.br/lab/canvas_pie_countdown/

Tested against IE6, IE7, IE8, Firefox 2, Firefox 3, Chrome and iPhone.

edited Jul 02 '11 at 00:45

answered Apr 21 '10 at 19:22

Irae Carvalho

777
1
6
19

2

That works when using other canvas libraries/API's. Note that the original poster said he needed it to be done with *ProcessingJS*, which renders all canvas elements with gray background as *default*. He wants to override this default behavior. The answer by Jared is actually the correct one. – YOMorales Jun 25 '11 at 22:30
No problem. I also make my frequent mistakes. ;) – YOMorales Jul 02 '11 at 08:19

score 3 · Answer 3 · edited Mar 03 '14 at 11:10

3

context.clearRect(0,0,width, height)

is all you need =)

Keep in mind that you can use CSS styling on the canvas object.

canvas.style.position = "absolute";  
canvas.style.left = the x position of the div you're going over +"px";  
canvas.style.top = the y position of the div you're going over + "px";

edited Mar 03 '14 at 11:10

mikemaccana

110,530
99
389
494

answered Feb 21 '10 at 06:20

Warty

7,237
1
31
49

score 0 · Answer 4 · answered Feb 21 '10 at 07:07

0

why not put the image in the canvas and make your strokes and fills transparent?

answered Feb 21 '10 at 07:07

jshen

11,507
7
37
59

Is it possible to create transparent canvas

4 Answers4