If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

SVG images ignore globalAlpha when drawn on canvas

RESOLVED DUPLICATE of bug 1028288

Status

()

Core
Canvas: 2D
RESOLVED DUPLICATE of bug 1028288
3 years ago
3 years ago

People

(Reporter: Artemy Tregubenko, Unassigned)

Tracking

({reproducible, testcase})

32 Branch
reproducible, testcase
Points:
---

Firefox Tracking Flags

(firefox32 affected, firefox33 ?, firefox34 ?, firefox35 fixed)

Details

(Whiteboard: DUPEME, URL)

(Reporter)

Description

3 years ago
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.
(Reporter)

Comment 1

3 years ago
The problem is also reproducible on Mac Firefox.
(Reporter)

Updated

3 years ago

Updated

3 years ago
Duplicate of this bug: 1074951

Updated

3 years ago
Status: UNCONFIRMED → NEW
Component: Untriaged → Canvas: 2D
Ever confirmed: true
Keywords: reproducible, testcase
OS: Linux → All
Product: Firefox → Core
Hardware: x86_64 → All

Comment 3

3 years ago
This works on current nightlies.
status-firefox32: --- → affected
status-firefox33: --- → ?
status-firefox34: --- → ?
status-firefox35: --- → fixed
Whiteboard: DUPEME

Updated

3 years ago
Status: NEW → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1028288
You need to log in before you can comment on or make changes to this bug.