Draw text on canvas using fabric.js

Question

I want to draw text on canvas., how to do it any sample example? The canvas already contains some shape drawn, i want to show text on the top of that shape on canvas How can i do it?

Answer 1

Also be aware that you need to actually have loaded a cufon font. There is no default font when using Fabric.js.

<script src="fabric.js"></script>
<script src="cufon.calibri.js"></script>

There are so many fonts available from http://www.cufonfonts.com/

This being the case the author is planning on removing the need for cufon. Discussed here: Fabric.js + Google Fonts

If you're wanting to render a block, then some text inside of that block. I would do something like this.

//Render the block
var block = canvas.add(new fabric.Rect({ 
    left: 100, 
    top: 100, 
    fill: 'blue'
}));

//Render the text after the block (so that it is in front of the block)
var text = canvas.add(new fabric.Text('I love fabricjs', { 
    left: block.left, //Take the block's position
    top: block.top, 
    fill: 'white'
}));

//Render the text and block on the canvas
//This is to get the width and height of the text element
canvas.renderAll(); 

//Set the block to be the same width and height as the text with a bit of padding
block.set({ width: text.width + 15, height: text.height + 10 });

//Update the canvas to see the text and block positioned together, 
//with the text neatly fitting inside the block
canvas.renderAll();

Answer 2

Take a look at How to render text tutorial.

It's as simple as:

canvas.add(new fabric.Text('foo', { 
  fontFamily: 'Delicious_500', 
  left: 100, 
  top: 100 
}));

Answer 3

Also worth noting that you might need to adjust Cufon's offsetLeft to help correctly position the text. Something like:

Cufon.fonts[your-fontname-in-lowercase-here].offsetLeft = 120;

The kitchen sink demo of fabric uses this: http://kangax.github.com/fabric.js/lib/font_definitions.js