0

I'm trying to reduce the opacity of the image drawn on the canvas, but it isn't working

var img = new Image();
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext('2d');

img.src = './picture.jpg';
canvas.width = img.width;
canvas.height = img.height;

img.style.opacity = 0.5;

ctx.drawImage(img, 30, 30, canvas.width, canvas.height);
tonynnabs
  • 29
  • 4
  • 1
    you have to set the alpha to the canvas element before drawing, not to the image (the image style is what the browser displays but not what the canvas element sees) https://stackoverflow.com/questions/31708618/draw-image-with-opacity-on-to-a-canvas#31708778 – arieljuod May 24 '21 at 19:55
  • You the best man! thanks – tonynnabs May 24 '21 at 19:56

1 Answers1

0
/// only image will have alpha affected:
context.globalAlpha = 0.5;
context.drawImage(image, x, y);
context.globalAlpha = 1.0;

https://stackoverflow.com/a/18949160/9161582

tonynnabs
  • 29
  • 4