I am developing a pain brush application in javascript using processing.js It is using cavas object. I want to keep an image at the background of 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 to do that?
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";
why not put the image in the canvas and make your strokes and fills transparent?
is transparent by default.
I've made a proof of concept that cam be found here:
http://irae.pro.br/lab/canvas_pie_countdown/
Tested against IE6, IE7, IE8, Firefox 2, Firefox 3, Chrome and iPhone.