HTML5 context.fillText html tag output

Question

I have here a canvas and in this I want to output a number which works but I want to output the number with a HTML tag. Here is the relevant part of the code:

function createCircle(x, y, text, callback) {
var radius = 75;
var endPercent = 3001;
var curPerc = 0;
var counterClockwise = false;
var circ = Math.PI * 2;
var quart = Math.PI / 2;
var text = '<span class="number">30</span>';

context.lineWidth = 10;
context.strokeStyle = '#ad2323';
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;

function doText(context, x, y, text) {
    context.lineWidth = 1;
    context.fillStyle = "#ad2323";
    context.lineStyle = "#ad2323";
    context.font = "28px sans-serif";
    context.fillText(text, x - 15, y + 5);
}

Here is a Fiddle

And why do you want to put that HTML tag in the canvas? How is that supposed to look, and what are you expecting ? — adeneo, Feb 01 '15 at 11:22
I want this beacause i have a countdown which should displayed there and for the countdown i must get a HTML tag to work. — t0m, Feb 01 '15 at 11:28
That's an X/Y problem, inserting the HTML tag into the canvas won't let you change the text with DOM manipulation, you'll have redraw the canvas for that anyway, and the only way to render tags in the canvas is with SVG, Blobs etc. and is complicated. — adeneo, Feb 01 '15 at 11:32
Either build a new canvas object an place it over the current canvas rendering the count down, or position the HTML element over the canvas, not in it. — Mouser, Feb 01 '15 at 11:46

score 0 · Accepted Answer · edited May 23 '17 at 12:06

In general, you can't render arbitrary HTML to the canvas. However...

If you were looking to style your countdown with CSS, you should copy the styles and apply them using context.font, context.fillStyle etc. If you don't know the styles and can't get them until run-time (eg: because this is a user-supplied value), you can get around this by parsing the document style attributes as shown here.

If you were looking to manipulate the text using jQuery or similar, you should instead call the function to redraw the canvas either every time the text changes or using by setTimeout or requestAnimationFrame.

Another option if you absolutely have to have an HTML tag there, is to simply position it over the canvas using position: absolute, left: <x-value>, top: <y-value>.

HTML5 context.fillText html tag output

1 Answers1