How to change the opacity (alpha, transparency) of an element in a canvas element?

by

I am also looking for an answer to this question, (to clarify, I want to be able to draw an image with user defined opacity such as how you can draw shapes with opacity) if you draw with primitive shapes you can set fill and stroke color with alpha to define the transparency. As far as I have concluded right now, this does not seem to affect image drawing. 

//works with shapes but not with images
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";

I have concluded that setting the globalCompositeOperation works with images. 

//works with images
ctx.globalCompositeOperation = "lighter";

I wonder if there is some kind third way of setting color so that we can tint images and make them transparent easily.

EDIT:

After further digging I have concluded that you can set the transparency of an image by setting the globalAlpha parameter BEFORE you draw the image:

//works with images
ctx.globalAlpha = 0.5

If you want to achieve a fading effect over time you need some kind of loop that changes the alpha value, this is fairly easy, one way to achieve it is the setTimeout function, look that up to create a loop from which you alter the alpha over time.

More Related Contents:

  1. HTML5 Canvas Rotate Image
  2. How do I give text or an image a transparent background using CSS?
  3. html5 – canvas element – Multiple layers
  4. How to Copy Contents of One Canvas to Another Canvas Locally
  5. Drawing text to with @font-face does not work at the first time
  6. How do I make a transparent canvas in html5?
  7. using HTML5 Canvas – rotate image about arbitrary point
  8. How to apply an opacity without affecting a child element with html/css?
  9. How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)
  10. Can you take a “screenshot” of the page using Canvas?
  11. HTML5 Canvas getImageData and Same Origin Policy
  12. Change background image opacity
  13. How can I write text on a HTML5 canvas element?
  14. Animated GIF in HTML5 canvas
  15. Chart.js canvas resize
  16. How to darken a background using CSS?
  17. Drawing a dot on HTML5 canvas [duplicate]
  18. HTML5 Canvas background image
  19. Placing a within a
  20. How do I reduce the opacity of an element’s background using CSS?
  21. Combining two or more Canvas elements with some sort of blending
  22. All html canvas shapes are given the color of the last object added
  23. What is the difference between SVG and HTML5 Canvas?
  24. Fast and responsive interactive charts/graphs: SVG, Canvas, other?
  25. How put percentage width into html canvas (no css)
  26. HTML5 Canvas and Line Width
  27. Clear Canvas Rect (but keep background)
  28. Poor anti-aliasing of text drawn on Canvas
  29. HTML5 Canvas – Fill circle with image
  30. HTML canvas with scrollbar

Leave a Comment