Closed
Bug 1074948
Opened 10 years ago
Closed 10 years ago
SVG images ignore globalAlpha when drawn on canvas
Categories
(Core :: Graphics: Canvas2D, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 1028288
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.
|
||
Updated•10 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•10 years ago
|
||
This works on current nightlies.
status-firefox32:
--- → affected
status-firefox33:
--- → ?
status-firefox34:
--- → ?
status-firefox35:
--- → fixed
Whiteboard: DUPEME
|
|
||
Updated•10 years ago
|
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•