CODEWITHSUNDEEP
google-chromecanvassvg
jcvandan
jcvandan

Reputation: 14314

Chrome rendering SVG font on <canvas> with random characters

I'm doing a bit of work with html5 canvas, and I want to render text using an SVG font via CSS @font-face. Unfortunately Chrome seems to render SVG fonts on canvas as random strange characters. Using other font-types aren't really an option as they are very poorly anti-aliased.

var context = $('canvas')[0].getContext("2d");

context.fillStyle = '#333333';
context.font = "20px Chela_One";
context.textBaseline = 'top';
context.textAlign = 'left';
context.fillText('Sample Text', 0, 0);

I've created a fiddle to demonstrate this: http://jsfiddle.net/9t6Kf/7/

On Safari (also webkit) the canvas SVG fonts work fine. Just seems to be chrome. Anyone know anything about this strange-ness?

EDIT

If the text looks normal, hit run again as it might not have loaded the font, so it will just use Times New.

Upvotes: 3

Views: 1706

Answers (2)

kunambi
kunambi

Reputation: 772

Just ran into this problem myself. Noticed that if you import fonts of the woff-format instead, Chrome will render the glyphs/text properly. I haven't observed a worsened anti-aliasing this way but YMMV.

@font-face {
  font-family: "Open Sans";
  src: url("../css/fonts/opensans_regular.eot");
  src: url("../css/fonts/opensans-regular.eot?#iefix") format("embedded-opentype"), 
    url("../css/fonts/opensans-regular.woff") format("woff"), 
    url("../css/fonts/opensans-regular.svg#opensansregular") format("svg"), 
    url("../css/fonts/opensans-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal; 
}

Just place the woff-declaration on the line above the svg-dito.

Cheers!

Upvotes: 3

Paul LeBeau
Paul LeBeau

Reputation: 101820

Looks like a bug in Chrome. There is an off-by-one error in the glyph indexes.

See http://jsfiddle.net/eUyr6/

ABC

is rendered as

BCD

I've submitted a bug report to the Chrome devs.

Upvotes: 1

Related Questions