Closed Bug 1074948 Opened 5 years ago Closed 5 years ago

SVG images ignore globalAlpha when drawn on canvas

Categories

(Core :: Canvas: 2D, defect)

32 Branch
defect
Not set

Tracking

()

RESOLVED DUPLICATE of bug 1028288
Tracking Status
firefox32 --- affected
firefox33 --- ?
firefox34 --- ?
firefox35 --- fixed

People

(Reporter: me, Unassigned)

References

()

Details

(Keywords: reproducible, testcase, Whiteboard: DUPEME)

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:32.0) Gecko/20100101 Firefox/32.0
Build ID: 20140924083558

Steps to reproduce:

TL;DR:
context.globalAlpha = 0.5;
context.drawImage(svgImage, 0, 0); // no alpha

More details in this plunkr: http://embed.plnkr.co/lx2oLPF0RpMFD578L9z4/preview

Full code: 
<!DOCTYPE html>
<html>
  <head>
    <style>canvas {width: 30px; height: 30px;}</style>
    <script>
      function draw(canvas, alpha, image) {
        canvas.width = 30;
        canvas.height = 30;
        var context = canvas.getContext('2d');
        context.globalAlpha = alpha;
        context.drawImage(image, 0, 0);
      }
      
      window.onload = function() {
        image = document.querySelector('img');
        draw(document.querySelector('#normal'),  1, image);
        draw(document.querySelector('#alpha'), 0.5, image);
      }
    </script>
  </head>

  <body>
    <p>Normal canvas: <canvas id="normal"></canvas></p>
    <p>Alpha canvas: <canvas id="alpha"></canvas></p>
    <p>Image: <img src='image.svg'/></p>
  </body>
</html>

image.svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36" viewBox="0 0 36 36">
<g>
<rect x="6" y="2" width="24" height="24" rx="3" ry="3" fill="black"/>
<rect x="7" y="3" width="22" height="22" rx="3" ry="3" fill="black"/>
</g>
<g transform="translate(9, 5)" id="contents">
<path fill="#ffe600" d="M7.99 2.5L8 6 7 8v7.5c0 .28-.22.5-.5.5h-2c-.28 0-.5-.22-.5-.5V8L3 6V2.5c0-.28.22-.5.5-.5.27 0 .49.22.49.5L4 5h1V2.5c0-.28.22-.5.5-.5.27 0 .49.22.49.5L6 5h1V2.5c0-.28.22-.5.5-.5.27 0 .49.22.49.5zM14.5 2H14c-.77 0-1.47.48-2 1.28-.62.91-.99 2.24-.99 3.72L11 10.5c0 .28.22.5.5.5h.5v4.5c0 .28.22.5.5.5h2c.28 0 .5-.22.5-.5v-13c0-.28-.22-.5-.5-.5z"/>
</g>
</svg>


Actual results:

The image is drawn on canvas without transparency.


Expected results:

The image should be drawn with 50% transparency, as Chrome does.
The problem is also reproducible on Mac Firefox.
Duplicate of this bug: 1074951
Status: UNCONFIRMED → NEW
Component: Untriaged → Canvas: 2D
Ever confirmed: true
OS: Linux → All
Product: Firefox → Core
Hardware: x86_64 → All
This works on current nightlies.
Whiteboard: DUPEME
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1028288
You need to log in before you can comment on or make changes to this bug.