Add Html Text to Html5 Canvas

Question

I got from a different Application a html formatted Text from user input. (With font b br ul and so on, different fonts and colors in one fragment )

I would like to write this on a canvas.

like context.write("<b>Hello</b> World <font...>more text </font>");

how can i do this?

Do you need to write it on the canvas? Are you going to manipulate it in some way? Otherwise you could just create a div with the text in it and position it in front of your canvas. — robertc
– robertc, Commented Apr 20, 2012 at 11:58
Yes i need to put in in the canvas. I want to animate it with some other elements. — Martin Wiegel
– Martin Wiegel, Commented Apr 20, 2012 at 12:22
Yes i need font. It is the output from an flex html textbox. — Martin Wiegel
– Martin Wiegel, Commented Apr 20, 2012 at 12:24
See Also: HTML5 Canvas API - formatting individual words with italics — KyleMit
– KyleMit ♦, Commented Nov 19, 2020 at 19:55

KyleMit · Accepted Answer · 2020-11-19 19:32:52Z

2

First, you'll have to make available to the canvas all the fonts you are using @font-face if needed.

Then you'll have to describe all the operations needed to draw the text, remember canvas is just a drawing surface. You'll have to iterate over these steps:

Specify the font to be used: (same syntax as the CSS font property)
```
context.font = "12px Arial bold"
```
Measure the string that will be drawn to know where to place the next one:
```
context.measureText(txt).width
```
Draw your text (fill or stroke):
```
context.fillText(txt, x, y)
```

edited Nov 19, 2020 at 19:32

KyleMit♦

31k74 gold badges517 silver badges712 bronze badges

answered Apr 20, 2012 at 17:28

Jocelyn LECOMTE

8951 gold badge7 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jing3142 · Accepted Answer · 2012-04-20 13:17:34Z

0

This should help

https://developer.mozilla.org/en/Drawing_text_using_a_canvas

Though you would need to read the formats from the html and re-apply using this method.

answered Apr 20, 2012 at 13:17

jing3142

1,8711 gold badge11 silver badges17 bronze badges

Collectives™ on Stack Overflow

Add Html Text to Html5 Canvas

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related