Interactive text fields with Fabric.js

html text canvas fabricjs
Kappei picture Kappei · Apr 4, 2012 · Viewed 27.1k times · Source

I've been playing with Fabric.js a lot in the last few weeks, but regarding text fields I've only found it possible to set the text on creation.

Is there any possible way to make an interactive text field, or do I have to find a workaround to achieve that? (With interactive text field I mean an area of the canvas I can click on and write directly into it.)

Answer

melwyn pawar picture melwyn pawar · Mar 2, 2014

The latest version of fabric.js includes a class IText which incorporates the interaction for editing and selection of text dynamically. try the code below with the latest version of fabric.js

canvas.add(new fabric.IText('Tap and Type', { 
  fontFamily: 'arial black',
  left: 100, 
  top: 100 ,
}));

Related questions

Write text on canvas with background

Is it possible to write image on canvas and write text with background? For example like this:

Read More
HTML text field over canvas element

I have been playing around with text in the canvas, and although it is easy to draw, it is not easy to interact with. I began implementing keyboard press functionality to update text on the canvas, but then gave up …

Read More
Subpixel anti-aliased text on HTML5's canvas element

I'm a bit confused with the way the canvas element anti-aliases text and am hoping you all can help. In the following screenshot the top "Quick Brown Fox" is an H1 element and the bottom one is a canvas element …

Read More