I've looked at things like Cufon and typeface.js but they seem to be SIFR alternatives and don't allow you to set freeform coordinates and draw custom type onto a <canvas>
Anyone got any ideas?
I've looked at things like Cufon and typeface.js but they seem to be SIFR alternatives and don't allow you to set freeform coordinates and draw custom type onto a <canvas>
Anyone got any ideas?
In my case, this worked.
Define the link with preload inside the head
tag, and specify its font inside the style
tag. When you draw it on the canvas, you should also specify the family name of the font and use functions like fillText()
.
<head>
<link rel="preload" href="myfont.woff" as="font" type="font/woff" crossorigin>
<style>
.cls {
font-family: 'myfont_familyname';
src: url('myfont.woff') format('woff');
}
</style>
</head>
I have just answered this question here: Preload font HTML5, JS, Kinetic.js?
The essential part:
@font-face {
font-family: 'myfont';
src: url('myfont.eot');
src: url('myfont.eot?#iefix') format('embedded-opentype'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype'),
url('myfont.svg#myfont') format('svg');
font-weight: normal;
font-style: normal;
}
It should not matter if you are using KineticJS or not, the only difference without KineticJS is that you would possibly create the Canvas element directly with HTML instead of using a div layer as container. After all KineticJS just creates a normal Canvas element in that container.
an answer from 3 years into the future lol
you can user javascript's new FontFace(family, font, descriptor)
https://developer.mozilla.org/en-US/docs/Web/API/FontFace/FontFace
where family is the name of the font, font is a url or ttf binary data, and descriptor is css elements.
then use ctx.fillText()
to create the text
I've thrown together a simple demo on jsfiddle here showing how to do this with @font-face: http://jsfiddle.net/zMKge/
Opera also has a simple tutorial on using
<canvas>
, including the text API.CSS:
Javascript: