Canvas custom font renders wrong

Question

Using a custom @font-face within a canvas element, renders fine in DOM, when rendered through canvas it stretches the text vertically. Or might be squashing it horizontally, cannot tell.

CSS:

@font-face {
    font-family: 'myFont';
    src: url('myFont.ttf');
}

Canvas element width is set to 100% of its parent (a 300x250px square) through CSS, text is added to canvas by:

cContext.fillStyle = "rgba(255,255,255,1)";
cContext.font = '58px "myFont"';
cContext.fillText("1000", 22, 71);

enter image description here

If you change the parent to be 300x150 does it fix the issue? — StudioTime, Mar 27 '15 at 13:07

score 1 · Accepted Answer · edited May 23 '17 at 12:30

 

var c = document.getElementById("square");
var ctx = c.getContext("2d");;
ctx.font = "40px Arial";
ctx.fillStyle = "#FF0000";
ctx.fillText("1000",40,80);

var c2 = document.getElementById("notsquare");
var ctx2 = c2.getContext("2d");;
ctx2.font = "40px Arial";
ctx2.fillStyle = "#FF0000";
ctx2.fillText("1000",40,60);

#square, #notsquare{
  border: 1px solid red;
  }
#notsquare{ 
  width: 300px;
  height: 400px;
  left:0px;
}

<canvas id='square' width='300' height='300' ></canvas>
<canvas id='notsquare' width='300' height='300' ></canvas>

Example from @pointy remark. To specify the width and height of the canvas element you should use the attributes of the element and not css.

if you want to resize the canvas you should do so in the JS like this Resize HTML5 canvas to fit window

Canvas custom font renders wrong

1 Answers1