HTML5 Canvas + Subscript and Superscript

Question

I would like to fill text in canvas as Subsccript and Superscript options. How do I acheive this.

Please help.

Answer 1

Since you aren't allowed to use HTML in drawText you can't use and sub. Instead have to do it yourself.

In other words, when you want superscript you will need to change the font to be smaller and either draw the text at a higher y-position or else set textBaseline = "top". For subscript you will have to do similar.

Otherwise you can use unicode. For instance it is valid to write:

ctx.fillText('x₂', 50, 50);, ctx.fillText('normalText0123₀₁₂₃₄₅₆₇₈₉', 50, 50);, etc.