Writing text using canvas in HTML5

Question

I have used the following code to write text using canvas.

<html>
 <head>
  <script type="text/javascript">
    function convert(){
      draw(document.getElementById('canvas').getContext('2d'));
    }

    function draw(txt){
      var fillText="Some text";
      txt.textBaseline="top";
      txt.font="Arial";
      txt.fillStyle="red";
      txt.fillText(fillText,20,20);
    }

  </script>
</head>
  <body onload="convert()">
    <canvas id="canvas"></canvas>
  </body>
</html>

My question is: is it possible to write text in other languages also?

The above code would create a text 'Some text' using canvas, i want the same using other languages — user475685, Jun 22 '11 at 10:40
you can do this with as3. Take a textfield and use this as parameter of the draw method from BitmapData Objects — philipp, Jun 22 '11 at 10:55
What do you mean by "other languages"? Like German, French, Japanese? Sure, what's stopping you from doing so? — Joachim Sauer, Jun 22 '11 at 10:56
that’s not an example of what you want to do. All you’ve done is re-stated what you said in the question. — Paul D. Waite, Jun 22 '11 at 12:00

score 6 · Accepted Answer · edited May 23 '17 at 12:27

6

As long as the font you use supports the other language's character sets there should be no problems.

If the font is not a common font (And a Japanese/Arabic/Hebrew font isn't) you should use @font-face to supply the font file.

Yuo can read this thread: Drawing text to <canvas> with @font-face does not work at the first time for a common gotcha.

edited May 23 '17 at 12:27

Community

1
1

answered Jun 22 '11 at 11:06

Variant

17,279
4
40
65

Writing text using canvas in HTML5

1 Answers1