15

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.

Jonas
  • 109,920
  • 93
  • 295
  • 369
Mr Bell
  • 9,118
  • 18
  • 80
  • 127
  • 2
    Are you wanting the canvas to be transparent so that you can place it over other elements? – Justin May 26 '10 at 21:28
  • 1
    No, it's not possible. See this answer: http://stackoverflow.com/questions/2359537/how-to-change-the-opacity-alpha-transparency-of-an-element-in-a-canvas-element – Intelekshual May 26 '10 at 21:42
  • Justin, no I want to draw a semi transparent image on top of other canvas element. I have no interest in making the entire canvas transparent. Intelekshual, setting context.globalAlpha effects subsequent context.drawImages atleast in Chrome. – Mr Bell May 26 '10 at 22:34

3 Answers3

22

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.

james.garriss
  • 12,255
  • 6
  • 78
  • 95
16

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

Undo
  • 25,381
  • 37
  • 106
  • 126
Eric Mickelsen
  • 9,909
  • 2
  • 28
  • 41
4

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.

Matt
  • 72,564
  • 26
  • 147
  • 178
Patrick Wied
  • 61
  • 2
  • You don't have to call toDataURL if you want to draw a canvas on an other, `drawImage` accepts canvas as imageSource. – Kaiido Jul 09 '16 at 23:27