CODEWITHSUNDEEP
htmlcanvas
Adam Goodnight
Adam Goodnight

Reputation: 19

Masking a div with a canvas element

I'm attempting to make a slideshow composed mostly of divs that can be masked by a canvas element (so that it may be in a circle or strange shape, rather than a square. Is this possible? I have seen many examples of masking an image, but not an entire div or collection of divs.

Upvotes: 1

Views: 2308

Answers (2)

Simon Sarris
Simon Sarris

Reputation: 63812

Yes its certainly possible to mask divs. For instance a canvas could mask a div like this:

enter image description here

that's just an image, source here:

http://jsfiddle.net/r58jF/

or white, which it should be noted merely gives the illusion of a circular div and that illusion is highly contingent upon what is in or behind the div

(or something fancier)

Upvotes: 3

Phrogz
Phrogz

Reputation: 303188

You cannot use the rendering of HTML elements as an image source for a canvas, and so you cannot use a canvas to draw the contents of HTML. If you want to make arbitrary portions of a div fully- or partially-transparent, the answer is "No, you cannot do that with a Canvas."

Upvotes: -1

Related Questions