3

I want to fill no color to canvas i.e. I want the background div color should keep on displaying in the div. I have googled it but didn't find any solution to keep fillStyle as no color.

Also I tried omitting the fillStyle but it leave me with black color.

Any options available?

Thanks

codeomnitrix
  • 4,179
  • 19
  • 66
  • 102
  • 1
    you cant do `canvas.fillStyle = "transparent"`? – PlantTheIdea Sep 03 '13 at 18:15
  • 1
    The default "color" of canvas is transparent. If you've drawn something on the canvas and want to erase the entire canvas to let the underlying div show again, use context.clearRect(0,0,canvas.width,canvas.height). If you want to draw something with its inside unfilled, omit context.fill() and just use context.stroke(). If you want to use a drawing to "erase" what's already on the canvas, set context.globalCompositeOperation="destination-out" and your new drawing will act as an eraser that makes the background div show through. – markE Sep 03 '13 at 18:22

3 Answers3

5

I don't know what you're trying to do, but it seems you want to make your canvas transparent. You could do that in JavaScript:

context.fillStyle = "rgba(0, 0, 200, 0)";

Or in CSS, where foo would be the id of the canvas element. Note that this would make the element per se transparent, not just it's contents.

#foo {
    opacity: 0;
}
federico-t
  • 12,014
  • 19
  • 67
  • 111
5

You need to use this to clear the canvas:

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

(or the rectangle you need).

Also make sure you have no CSS rules set for the canvas element's background (which might be the case if your canvas is not transparent on init as canvas is transparent as default).

If you need to clear a non-regular shape you can use composite mode:

context.globalCompositeOperation = 'destination-out';

(xor and source-out can also be used too to a certain degree too to remove existing pixels but with some variations).

This will clear the canvas in the form of the next shape (Path) you draw (or use an image which solid pixels will clear the canvas).

0

You need to clear your canvas, not draw transparency... just think about that. You can't clean a glass, by using clear paint, the same is applied to the <canvas> element.

http://jsfiddle.net/Z6XTg/1/

this canvas demo does a very simple 

ctx.clearRect(0,0,canvas.width,canvas.height);

before it draws anything, thus maintaining the canvas transparency.

ericjbasti
  • 2,085
  • 17
  • 19