0

I am making a game that loads canvas first, then load all the images, but I am having problem with the opacity of each image, when I try to use "img.style.opacity = 0.5;" nothing changes in the image... This is a part of code:

     imageObj.src = "table.jpg";
    var tequila = new Image();
        tequila.src = "tequila.png";
        tequila.style.opacity = 0.5;
       wisky.onload = function(){
          context.drawImage(tequila, 180, 319);

        };


  }
Carlos Montiel
  • 301
  • 1
  • 4
  • 16

2 Answers2

1

Take a look at this enter link description here and place your images into the associated div containers.

EDIT: really, two downvotes for giving you the exact answer? :S

FYI: Opacity in Canvas is controlled with globalAlpha value as far as i know.

EDIT 2: This was already answered here

You have to either change globalAlpha or draw the image to an off-screen canvas that has globalAlpha set, then draw this canvas onto the main canvas.

Just set alpha, draw the image and reset alpha back to full opacity. Setting alpha does not change the content that is already drawn to the canvas - it only applies to the next thing drawn (which would be the image in this case).

And of course, you can always prep your image with an alpha-channel in case of PNG images.

Cheers to the downers :)

Community
  • 1
  • 1
codeCompiler77
  • 508
  • 7
  • 22
  • 2
    The question is asking about images on a canvas, not image elements in the DOM. – Quentin Feb 28 '16 at 18:53
  • Opacity does not mean that one picture will be on top of another. Opacity is the opposite of translucency, and transparency is just complete translucency. – Quentin Feb 28 '16 at 18:54
  • 1
    @Quentin Then he's using the wrong code because in a canva's in the `globalAlpha` value that controls opacity. – codeCompiler77 Feb 28 '16 at 18:56
  • @codeCompiler77 You are correct. That is part of my answer. – Toothbrush Feb 28 '16 at 19:00
  • @Toothbrush I'm salty for getting downvoted because he used a DOM function but mentioned canva's. I'm never going to get 15 rep at this rate haha. Well at least he has his answer now :) – codeCompiler77 Feb 28 '16 at 19:03
  • 1
    Your answer would still have been wrong if the question was about images in the DOM. There's no requirement that `opacity` only be applied to div elements (or even elements that are `display: block`). – Quentin Feb 28 '16 at 19:06
  • @codeCompiler77 I downvoted your answer because it seemed you didn't read the question or the code he posted. I have now removed my downvote and changed it to an upvote. Just be careful when you post an answer; make sure you read and _understand_ the question and code posted - I have also made the same mistake before. – Toothbrush Feb 28 '16 at 19:07
  • @Quentin i never said that it was only for div elements, my preference is to contain everything inside of div's, which if it was in the DOM would have done what he wanted i believe? – codeCompiler77 Feb 28 '16 at 19:11
  • @Toothbrush **Thanks** man, i went by the code (syntax) i saw and not the actual question. Cheers mate – codeCompiler77 Feb 28 '16 at 19:12
1

drawImage draws the image you specify and does not look for any styling applied to the image.

However, the canvas' context has a property called globalAlpha (see https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-globalalpha), so you could set it to 0.5 before you draw the image, and reset it afterwards.

Toothbrush
  • 2,080
  • 24
  • 33