CODEWITHSUNDEEP
javascripthtmlcanvastransparency
Mr Bell
Mr Bell

Reputation: 9338

How to draw transparent image with html5 canvas element

I am targeting google chrome. Is it possible to draw transparent images on a canvas? By transparent I mean the drawing the entire image at something like 50% opacity.

Upvotes: 14

Views: 46188

Answers (3)

Eric Mickelsen
Eric Mickelsen

Reputation: 10377

The canvas element has a global alpha attribute that lets you apply partial transparency to anything you draw.

Upvotes: 16

Patrick Wied
Patrick Wied

Reputation: 61

It's possible if you iterate thru the canvas' image-data and set the alpha value manually, then export the transparent image with the canvas.toDataURL method and insert it into another canvas.

Upvotes: 4

james.garriss
james.garriss

Reputation: 13406

You can do this using the globalAlpha property, like this:

<!DOCTYPE HTML>
<html>
    <body>
        <canvas height="100" width="100" id="myCanvas"></canvas>
        <script>
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            context.globalAlpha = 0.5;
            var myImage = new Image();
            myImage.src = "someImage.jpg";
            myImage.onload = function()
            {
                context.drawImage(myImage, 0, 0, 100, 100);
            };
        </script>
    </body>
</html>

And yes, it does work with images. Verified with IE 9, FF 5, Safari 5, and Chrome 12 on Win 7.

Upvotes: 23

Related Questions