163

Is it possible to write text on HTML5 canvas?

Improve this question
6
  • 1
    I would recommend reading through the <a href="diveintohtml5.info/">diveintohtml5</a> site, it has its own <a href="diveintohtml5.info/canvas.html#text">chapter about text</a>. It's a very good read.
    – chelmertz
    Commented Sep 13, 2010 at 8:22
  • In addition to the other answers if you want to write text using excanvas (for IE support) you'll need an additional script, available here: code.google.com/p/explorercanvas/issues/detail?id=6 The default download (code.google.com/p/explorercanvas/downloads/list) doesn't include the fillText and strokeText method.
    – Castrohenge
    Commented Sep 14, 2010 at 16:17
  • 2
    @IvanCastellanos Did you find any relevant search results? It might be helpful to post them here, if you found any.
    – Anderson Green
    Commented May 24, 2013 at 4:34
  • 2
    @IvanCastellanos - this question (for me at least) now comes up top for "HTML canvas text" on Google. Is that not the purpose of Stack Overflow?
    – colincameron
    Commented Jun 3, 2013 at 9:40
  • Yes it is easy to do so on Canvas. I would add more to your post so that you can show some examples of what you have tried and what you have not tried. Just the question along is not really that beneficial to Stackoverflow.com
    – Doug Hauf
    Commented Jun 19, 2014 at 18:33

8 Answers 8

Reset to default
247 

var canvas = document.getElementById("my-canvas");
var context = canvas.getContext("2d");

context.fillStyle = "blue";
context.font = "bold 16px Arial";
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText("Zibri", (canvas.width / 2), (canvas.height / 2));
#my-canvas {
  background: #FF0;
}
<canvas id="my-canvas" width="200" height="120"></canvas>

Improve this answer
4
  • 3
    Is there any way to get the font width and size so we can center it? (Dynamic content)
    – Oliver Dixon
    Commented Dec 30, 2014 at 2:20
  • 2
    assume:your canvas width-200, height:100 horizontal: ctx.textAlign = 'center' ctx.fillText('Hello', 100, 10) vertical: ctx.textBaseline = 'middle' ctx.fillText('Hello', 10, 50)
    – tomision
    Commented Aug 18, 2016 at 6:30
  • 2
    Documentation: fillText
    – jpaugh
    Commented Jan 9, 2019 at 22:41
  • When I do this the text is blurry. Any ideas?
    – 1.21 gigawatts
    Commented Feb 2 at 19:48
9

Drawing text on a Canvas

Markup:

<canvas id="myCanvas" width="300" height="150"></canvas>

Script (with few different options):

<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.font = 'italic 18px Arial';
    ctx.textAlign = 'center';
    ctx. textBaseline = 'middle';
    ctx.fillStyle = 'red';  // a color name or by using rgb/rgba/hex values
    ctx.fillText('Hello World!', 150, 50); // text and position
</script>

Check out the MDN documentation and this JSFiddle example.

Improve this answer
2
7

Canvas text support is actually pretty good - you can control font, size, color, horizontal alignment, vertical alignment, and you can also get text metrics to get the text width in pixels. In addition, you can also use canvas transforms to rotate, stretch and even invert text.

Improve this answer
1
  • Do you know if it is possible for canvas text to be copied to a text editor? I'm thinking no. I found Notes in Apple iCloud does not permit it, and there's nothing in the DOM to even copy that has text in the developer tools. What Apple does seem to offer is a "Copy Image" feature discussions.apple.com/thread/7434447 , which one can then OCR. But it would be great if text was copyable somehow directly. Interestingly enough iCloud notes text has a cursor and selector highlights you just can't seem to do anything with it other than type and insert. I'm hoping they just disabled something
    – jxramos
    Commented Sep 16, 2023 at 23:08
4

It is really easy to write text on a canvas. It was not clear if you want someone to enter text in the HTML page and then have that text appear on the canvas, or if you were going to use JavaScript to write the information to the screen.

The following code will write some text in different fonts and formats to your canvas. You can modify this as you wish to test other aspects of writing onto a canvas.

 <canvas id="YourCanvasNameHere" width="500" height="500">Canvas not supported</canvas>

 var c = document.getElementById('YourCanvasNameHere');
 var context = c.getContext('2d'); //returns drawing functions to allow the user to draw on the canvas with graphic tools.

You can either place the canvas ID tag in the HTML and then reference the name or you can create the canvas in the JavaScript code. I think that for the most part I see the <canvas> tag in the HTML code and on occasion see it created dynamically in the JavaScript code itself.

Code:

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.font = 'bold 10pt Calibri';
  context.fillText('Hello World!', 150, 100);
  context.font = 'italic 40pt Times Roman';
  context.fillStyle = 'blue';
  context.fillText('Hello World!', 200, 150);
  context.font = '60pt Calibri';
  context.lineWidth = 4;
  context.strokeStyle = 'blue';
  context.strokeText('Hello World!', 70, 70);
Improve this answer
4

Depends on what you want to do with it I guess. If you just want to write some normal text you can use .fillText().

Improve this answer
3

Yes of course you can write a text on canvas with ease, and you can set the font name, font size and font color. There are two method to build a text on Canvas, i.e. fillText() and strokeText(). fillText() method is used to make a text that can only be filled with color, whereas strokeText() is used to make a text that can only be given an outline color. So if we want to build a text that filled with color and have outline color, we must use both of them.

here the full example, how to write text on canvas :

<canvas id="Canvas01" width="400" height="200" style="border:2px solid #bbb; margin-left:10px; margin-top:10px;"></canvas>

<script>
  var canvas = document.getElementById('Canvas01');
  var ctx = canvas.getContext('2d');

  ctx.fillStyle= "red";
  ctx.font = "italic bold 35pt Tahoma";
  //syntax : .fillText("text", x, y)
  ctx.fillText("StacOverFlow",30,80);

</script>

Here the demo for this, and you can try your self for any modification: http://okeschool.com/examples/canvas/html5-canvas-text-color

Improve this answer
1

It is easy to write text to a canvas. Lets say that you canvas is declared like below.

<html>
  <canvas id="YourCanvas" width="500" height="500">
   Your Internet Browser does not support HTML5 (Get a new Browser)
  </canvas>
</html>

This part of the code returns a variable into canvas which is a representation of your canvas in HTML.

  var c  = document.getElementById("YourCanvas");

The following code returns the methods for drawing lines, text, fills to your canvas.

  var ctx = canvas.getContext("2d");

<script>
  ctx.font="20px Times Roman";
  ctx.fillText("Hello World!",50,100);

  ctx.font="30px Verdana";

  var g = ctx.createLinearGradient(0,0,c.width,0);

  g.addColorStop("0","magenta");
  g.addColorStop("0.3","blue");
  g.addColorStop("1.0","red");

  ctx.fillStyle=g; //Sets the fille of your text here. In this case it is set to the gradient that was created above. But you could set it to Red, Green, Blue or whatever.

  ctx.fillText("This is some new and funny TEXT!",40,190);
</script>

There is a beginners guide out on Amazon for the kindle http://www.amazon.com/HTML5-Canvas-Guide-Beginners-ebook/dp/B00JSFVY9O/ref=sr_1_4?ie=UTF8&qid=1398113376&sr=8-4&keywords=html5+canvas+beginners that is well worth the money. I purchased it a couple of days ago and it showed me a lot of simple techniques that were very useful.

Improve this answer
1

I found a good tutorial on oreilly.com.

Example code:

<canvas id="canvas" width ='600px'></canvas><br />
Enter your Text here .The Text will get drawn on the canvas<br />
<input type="text" id="text" onKeydown="func();"></input><br />
</body><br />
<script>
function func(){
var e=document.getElementById("text"),t=document.getElementById("canvas"),n=t.getContext("2d");
n.fillStyle="#990000";n.font="30px futura";n.textBaseline="top";n.fillText(e.value,150,0);n.fillText("thank you, ",200,100);
n.fillText("Created by ashish",250,120)
}
</script>

courtesy: @Ashish Nautiyal

Improve this answer
2
  • The link is not longer valid.
    – Mr J Wolf
    Commented Mar 3, 2023 at 6:59
  • @MrJWolf I edited the link in this answer to refer to the wayback machine.
    – jeremysawesome
    Commented Feb 19 at 16:07

Not the answer you're looking for? Browse other questions tagged or ask your own question.