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?

Matriculate

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. – Recollected

Answer 1

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!

Genevieve

Correct answer when using ProcessingJS. It also solved my problems. – Recollected

Answer 2

<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.

Hachman

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. – Recollected

No problem. I also make my frequent mistakes. ;) – Recollected

Answer 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";

Conflagration

Answer 4

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

Semiology