Search code examples
javascriptcanvasfabricjs

FabricJs: Font does not update after changing Text

Is this an issue/bug ? try on the offical demo site:

http://fabricjs.com/kitchensink OR http://fabricjs.com/loadfonts

  1. select Textbox with a text
  2. make sure cursor inside Textbox
  3. ctrl+a to mark all Text
  4. overwrite the old Text with some new words (while marking the old text)

After new input, you are not able to change font-Family anymore or other Font settings like font size. Shadows still works.

?? why this?

Solution

  • Very Good catch.

    in the above examples, if you select textbox and see console

    canvas.getActiveObject().styles

    This will return the object of multiple styles becase those styles are assigned to per char of string/textbox.

    If you want to change the fontFamily or any style after changing text. just asign styles = null as below.

    You can test this in http://fabricjs.com/kitchensink also in developer tool.

    canvas.getActiveObject().styles = null

    enter image description here