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)

17 Branch
x86
macOS
defect
Not set
normal

Tracking

()

RESOLVED FIXED
mozilla30
Tracking Status
firefox28 --- fixed
firefox29 --- fixed
firefox30 --- fixed
b2g-v1.3 --- fixed
b2g-v1.3T --- fixed
b2g-v1.4 --- fixed

People

(Reporter: malapheev, Assigned: jrmuizel)

Details

Attachments

(1 file)

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?
Component: Untriaged → Canvas: 2D
Product: Firefox → Core
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>
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>
Flags: needinfo?(jmuizelaar)
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 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+
Assignee: nobody → jmuizelaar
Status: NEW → ASSIGNED
https://hg.mozilla.org/mozilla-central/rev/b8544c32df23
Status: ASSIGNED → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla30
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?
Attachment #8368401 - Flags: approval-mozilla-beta?
Attachment #8368401 - Flags: approval-mozilla-beta+
Attachment #8368401 - Flags: approval-mozilla-aurora?
Attachment #8368401 - Flags: approval-mozilla-aurora+
Looks like this landed with tests. Can someobody please confirm?
Flags: in-testsuite?
(In reply to Anthony Hughes, QA Mentor (:ashughes) from comment #16)
> Looks like this landed with tests. Can someobody please confirm?

It did.
Thanks Jeff, marking in-testsuite+.
Flags: in-testsuite? → in-testsuite+
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: