html5 canvas rendering of textBaseline="hanging"; is wrong

RESOLVED DUPLICATE of bug 438702

Status

()

Core
Canvas: 2D
RESOLVED DUPLICATE of bug 438702
8 years ago
7 years ago

People

(Reporter: steveroush, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

8 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.2) Gecko/20100115 Firefox/3.6 (.NET CLR 3.5.30729)


position for 'textBaseline="hanging";' is incorrect

Reproducible: Always

Steps to Reproduce:
use this html5 file:

<HTML>

<HEAD><META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Pages: 0 -->
</HEAD>
<BODY>
<TITLE>Gg</TITLE>
<canvas id="myCanvas" width="414" height="108">Your browser does not support the canvas tag.</canvas>
   <SCRIPT LANGUAGE='Javascript'>

       var canvas = document.getElementById("myCanvas");
       if (canvas.getContext) {
         var ctx = canvas.getContext("2d");
 

ctx.beginPath();
ctx.moveTo(0,91);
ctx.lineTo(414,90);
ctx.stroke();
ctx.closePath();


     ctx.fillStyle="black";
     ctx.font = "14pt  Times-Roman";
ctx.textBaseline="top";
     ctx.fillText("aaa", 18, 86);
ctx.textBaseline="hanging";
     ctx.fillText("bbb", 88, 86);
ctx.textBaseline="middle";
    ctx.fillText("ccc", 162, 86);
ctx.textBaseline="alphabetic";
     ctx.fillText("ddd", 232, 86);
ctx.textBaseline="ideographic";
     ctx.fillText("eee", 306, 86);
ctx.textBaseline="bottom";
     ctx.fillText("ffff", 378, 86);
}
displayCanvas();</SCRIPT>
<!-- insert any other html content here -->
</BODY>
</HTML>


Expected Results:  
text should be positioned lower.

Updated

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