How to set 2 fonts for HTML5 canvas context?

Question

I'm trying to get the Canvas to use two fonts when drawing text. This is because my main font is Comic Sans MS (It's a kids app). Since I can't find Comic Sans on iPad, I'm trying to substitute it with MarkerFelt-Thin.

I've tried to use several variations of the following statement:

ctx.font = "40pt MarkerFelt-Thin; 40pt Comic Sans MS";

Doesn't seem to be working. So at the moment I'm using user agent detection and manually assigning different fonts for each user agent.

Anyone know the right way to do this?

Cheers

Answer 1

Canvas's font uses the same syntax as the CSS font attribute. So try:

ctx.font = "40pt MarkerFelt-Thin, Comic Sans MS";