Closed
Bug 821475
Opened 11 years ago
Closed 10 years ago
[OSX] canvas fillText doesn't support vertical linear gradient
Categories
(Core :: Graphics: Canvas2D, defect)
Tracking
()
RESOLVED
FIXED
mozilla30
People
(Reporter: malapheev, Assigned: jrmuizel)
Details
Attachments
(1 file)
1.14 KB,
patch
|
mstange
:
review+
lsblakk
:
approval-mozilla-aurora+
lsblakk
:
approval-mozilla-beta+
|
Details | Diff | Splinter Review |
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11 Steps to reproduce: Using following code try to fill text with gradient (or just opent a demo http://jsfiddle.net/EKWMq/3/): var canvas = $('canvas')[0]; var ctx = canvas.getContext('2d'); var grad=ctx.createLinearGradient(50, 150, 50, 300); grad.addColorStop(0, "green"); grad.addColorStop(1, "yellow"); ctx.fillStyle=grad; ctx.textBaseline = 'top'; ctx.font = '150px sans-serif '; ctx.lineHeight = 1; ctx.fillText("TESTIII", 50, 150); Actual results: Text just drawn as green Expected results: Text should be drawn with gradient (works fine in all other browsers)
It works fine with FF17 on Win 7: http://i.imgur.com/pHAXX.jpg Issue only with Firefox on OSX?
yes, i've checked now on FF17 on Windows 8 it also works fine, so issue is only on OSX
Yep, it looks like it fails only on OSX: http://browsershots.org/http://jsfiddle.net/EKWMq/3/
Summary: canvas fillText doesn't support vertical linear gradient → [OSX] canvas fillText doesn't support vertical linear gradient
I am still having the same problem with FF 25.0.1 on OS X (10.9) Here is my test case: <!DOCTYPE html> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Revalia"/> <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu"/> </head> <body> <canvas width="1400px" height="400px" class="splashMessage" id="splashMessageCanvas"></canvas> <script> var canvas = document.getElementById("splashMessageCanvas"); var ctx = canvas.getContext("2d"); //ctx.font = "70px Revalia"; ctx.font = "70px Verdana"; var x = canvas.width / 2; var y = canvas.height / 2; ctx.textAlign = 'center'; /* ctx.save(); ctx.setTransform(1, 0, -3, -2, -270, -90); ctx.fillStyle = gradient; ctx.fillText("404: PAGE NOT FOUND", x, -90); ctx.restore(); */ //var gradient = ctx.createLinearGradient(0, 0, 0, 100); //gradient.addColorStop(0, 'black'); //gradient.addColorStop(1, 'red'); var gradient=ctx.createLinearGradient(0,0,0,100); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); ctx.fillStyle = gradient; ctx.fillText("404: PAGE NOT FOUND", x, 90); //ctx.fillStyle = 'rgba(255, 0, 0, 0.2)'; ctx.fillStyle = gradient ctx.fillRect(10,100,canvas.width,100); </script> </body> </html>
When creating a gradient of height 100 [var gradient=ctx.createLinearGradient(0,0,0,100);] no gradient is applied to anything. Increasing the height to 200 [var gradient=ctx.createLinearGradient(0,0,0,200);] puts a gradient on the box, but the text is still a solid color.
Flagged as new as you are 2 Mac OSX users to confirm the bug.
Status: UNCONFIRMED → NEW
Ever confirmed: true
I have another slightly simpler example as well <!DOCTYPE html> <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Revalia"/> <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu"/> </head> <body> <canvas width="1400px" height="400px" class="splashMessage" id="splashMessageCanvas"></canvas> <script> var canvas = document.getElementById("splashMessageCanvas"); var ctx = canvas.getContext("2d"); ctx.font = "70px Revalia"; ctx.textAlign = 'center'; ctx.save(); var gradient = ctx.createLinearGradient(0, -150, 0, -100); ctx.setTransform(1, 0, -3, -2, -270, -90); gradient.addColorStop(0, 'rgba(255, 255, 255, 0)'); gradient.addColorStop(1, 'grey'); ctx.fillStyle = gradient; ctx.fillText("WELCOME TO TOC", canvas.width/2, -90); ctx.restore(); ctx.fillStyle = 'black'; ctx.fillText("WELCOME TO TOC", canvas.width/2, 90); </script> </body> </html>
Comment 8•10 years ago
|
||
I'm getting the same failure. Here's my test case <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" encoding="UTF-8"> <head> <meta charset="UTF-8"/> <title>Gradient Text</title> <script language="javascript"> window.onload = function () { var canvas = document.getElementById("test"); var context = canvas.getContext("2d"); var text = "Bobo the wonder pig"; var colorTop = 'rgba(255,0,0,1)'; var colorBottom = 'rgba(0,255,0,1)'; var inset = 10; var grad = context.createLinearGradient(inset, inset, inset, inset + 100 - 2 * inset); // add color stops grad.addColorStop(0, colorTop); grad.addColorStop(1, colorBottom); // draw background context.fillStyle = 'rgba(0,0,0,.05)'; context.fillRect(0, 0, 600, 100); /// draw text context.textBaseline = 'top'; context.font = 'normal 36pt Arial'; context.fillStyle = grad; context.fillText(text, inset, inset); } </script> </head> <body> <canvas id="test" width="600" height="100"></canvas> </body> </html>
Updated•10 years ago
|
Flags: needinfo?(jmuizelaar)
Assignee | ||
Comment 9•10 years ago
|
||
We muck with the matrix before we draw the text. We need to set it back after.
Attachment #8368401 -
Flags: review?(mstange)
Flags: needinfo?(jmuizelaar)
Comment 10•10 years ago
|
||
Comment on attachment 8368401 [details] [diff] [review] Remove flip when drawing gradient Is there a reason you chose this over CGContextScaleCTM(cg, 1, -1), except for consistency with the first occurrence? Also, can I please have a reftest? :)
Attachment #8368401 -
Flags: review?(mstange) → review+
Updated•10 years ago
|
Assignee: nobody → jmuizelaar
Status: NEW → ASSIGNED
Assignee | ||
Comment 11•10 years ago
|
||
https://hg.mozilla.org/integration/mozilla-inbound/rev/b8544c32df23
Comment 12•10 years ago
|
||
https://hg.mozilla.org/mozilla-central/rev/b8544c32df23
Status: ASSIGNED → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla30
Assignee | ||
Comment 13•10 years ago
|
||
Comment on attachment 8368401 [details] [diff] [review] Remove flip when drawing gradient [Approval Request Comment] Bug caused by (feature/regressing bug #): 896489 User impact if declined: Gradients in text will be drawn wrong Testing completed (on m-c, etc.): on m-c Risk to taking this patch (and alternatives if risky): Low risk change, comes with a test case.
Attachment #8368401 -
Flags: approval-mozilla-beta?
Attachment #8368401 -
Flags: approval-mozilla-aurora?
Updated•10 years ago
|
Attachment #8368401 -
Flags: approval-mozilla-beta?
Attachment #8368401 -
Flags: approval-mozilla-beta+
Attachment #8368401 -
Flags: approval-mozilla-aurora?
Attachment #8368401 -
Flags: approval-mozilla-aurora+
Comment 14•10 years ago
|
||
https://hg.mozilla.org/releases/mozilla-aurora/rev/a19c485db5de https://hg.mozilla.org/releases/mozilla-beta/rev/d47ccac51df0
Updated•10 years ago
|
status-b2g-v1.3:
--- → fixed
Comment 16•10 years ago
|
||
Looks like this landed with tests. Can someobody please confirm?
Flags: in-testsuite?
Assignee | ||
Comment 17•10 years ago
|
||
(In reply to Anthony Hughes, QA Mentor (:ashughes) from comment #16) > Looks like this landed with tests. Can someobody please confirm? It did.
Updated•10 years ago
|
status-b2g-v1.3T:
--- → fixed
status-b2g-v1.4:
--- → fixed
You need to log in
before you can comment on or make changes to this bug.
Description
•