Is it possible to create a transparent canvas

Question

I am developing a brush application in javascript using processing.js. It uses a canvas object. I want to save an image on a canvas background. Draw something in the foreground. And when saving, I need to get only the foreground data.

To do this, we need to make the transparent object transparent so that the background image is visible.

I do not see the possibility of making a transparent canvas. How to do it?

Answer 1

Even better, on top of your pjs just put:

/* @pjs transparent=true; */ 

... and then in your drawing scheme:

 background(0, 0, 0, 0); 

voila!

Answer 2

<canvas> is transparent by default.

I made a proof of concept, which can be found here:

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

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

Answer 3

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

- all you need =)

Keep in mind that you can use CSS styles on a 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"; 

Answer 4

Why not put the image on the canvas and make your strokes and fills transparent?