Draw/write text on HTML5 canvas with multiple fonts using javascript

Is it possible to draw/write text on a HTML5 canvas with multiple fonts using javascript? I have only been able to set one font for all text that is for the canvas.
Who is Participating?
Robert SchuttConnect With a Mentor Software EngineerCommented:
In css you can only assign 1 font to canvas but that's not what I would normally use.

Do you mean something like this:
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

ctx.font="10px monospace";
ctx.fillText("Hello World",120,80);

Open in new window

tested here: http://schutt.nl/ee/Q_28244477/ 
Canvas is a replaced element.  It is implemented much like an image.  in order to apply multiple fonts you would have to carry the fonts with other tags, and you cannot put tags inside a canvas.  

If you need different fonts, you do like you do when you need text in an image you use an absolute positioned element to overlay.  

itniflAuthor Commented:
I use pt instead if px. When using px I got the result you were showing.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.