canvashtml5-canvas

HTML5 Canvas + Subscript and Superscript

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

Please help.

Solution

  • Since you aren't allowed to use HTML in drawText, you can't use <sup> 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.