Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser



Build Status Code Climate Coverage Status Gitpod Ready-to-Code

Bower version NPM version Downloads per month CDNJS version

Dependency Status devDependency Status

Bountysource Flattr this git repo

Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser.

Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes — rectangles, circles, ellipses, polygons, or more complex shapes consisting of hundreds or thousands of simple paths. You can then scale, move, and rotate these objects with the mouse; modify their properties — color, transparency, z-index, etc. You can also manipulate these objects altogether — grouping them with a simple mouse selection.

Non-Technical Introduction to Fabric

Fabric.js allows you to easily create simple shapes like rectangles, circles, triangles and other polygons or more complex shapes made up of many paths, onto the HTML <canvas> element on a webpage using JavaScript. Fabric.js will then allow you to manipulate the size, position and rotation of these objects with a mouse. It’s also possible to change some of the attributes of these objects such as their color, transparency, depth position on the webpage or selecting groups of these objects using the Fabric.js library. Fabric.js will also allow you to convert an SVG image into JavaScript data that can be used for putting it onto the <canvas> element.

Contributions are very much welcome!


Supported browsers

  • Firefox 4+
  • Safari 5+
  • Opera 9.64+
  • Chrome (all versions)
  • Edge (chromium based, all versions)
  • IE11 and Edge legacy, supported but deprecated.

You can run automated unit tests right in the browser.


Fabric.js started as a foundation for design editor on — interactive online store with ability to create your own designs. The idea was to create Javascript-based editor, which would make it easy to manipulate vector shapes and images on T-Shirts. Since performance was one of the most critical requirements, we chose canvas over SVG. While SVG is excellent with static shapes, it's not as performant as canvas when it comes to dynamic manipulation of objects (movement, scaling, rotation, etc.). Fabric.js was heavily inspired by Ernest Delgado's canvas experiment. In fact, code from Ernest's experiment was the foundation of an entire framework. Later, Fabric.js grew into a collection of distinct object types and got an SVG-to-canvas parser.

Installation Instructions

Install with bower

$ bower install fabric

Install with npm

Note: If you are using Fabric.js in a Node.js script, you will depend from node-canvas.node-canvas is an html canvas replacement that works on top of native libraries. Please follow the instructions located here in order to get it up and running.

$ npm install fabric --save

After this, you can import fabric like so:

const fabric = require("fabric").fabric;

Or you can use this instead if your build pipeline supports ES6 imports:

import { fabric } from "fabric";

NOTE: es6 imports won't work in browser or with bundlers which expect es6 module like vite. Use commonjs syntax instead.

See the example section for usage examples.


  1. Install Node.js

  2. Build distribution file [~77K minified, ~20K gzipped]

     $ node build.js

    2.1 Or build a custom distribution file, by passing (comma separated) module names to be included.

       $ node build.js modules=text,serialization,parser
       // or
       $ node build.js modules=text
       // or
       $ node build.js modules=parser,text
       // etc.

    By default (when none of the modules are specified) only basic functionality is included. See the list of modules below for more information on each one of them. Note that default distribution has support for static canvases only.

    To get minimal distribution with interactivity, make sure to include corresponding module:

       $ node build.js modules=interaction

    2.2 You can also include all modules like so:

       $ node build.js modules=ALL

    2.3 You can exclude a few modules like so:

       $ node build.js modules=ALL exclude=gestures,image_filters
  3. Create a minified distribution file

     # Using YUICompressor (default option)
     $ node build.js modules=... minifier=yui
     # or Google Closure Compiler
     $ node build.js modules=... minifier=closure
  4. Enable AMD support via require.js (requires uglify)

     $ node build.js requirejs modules=...
  5. Create source map file for better productive debugging (requires uglify or google closure compiler).
    More information about source maps.

     $ node build.js sourcemap modules=...

    If you use google closure compiler you have to add sourceMappingURL manually at the end of the minified file all.min.js (see issue

  6. Ensure code guidelines are met (prerequisite: npm -g install eslint)

     $ npm run lint && npm run lint_tests


  1. Install Node.js

  2. Install NPM, if necessary

  3. Install NPM packages

     $ npm install
  4. Run test suite

Make sure testem is installed

    $ npm install -g testem

Run tests Chrome and Node (by default):

    $ testem

See testem docs for more info:


Who's using Fabric?


Documentation is always available at

Also see official 4-part intro series, presentation from BK.js and presentation from Falsy Values for an overview of fabric.js, how it works, and its features.

Optional modules

These are the optional modules that could be specified for inclusion, when building custom version of fabric:

  • text — Adds support for static text (fabric.Text)
  • itext — Adds support for interactive text (fabric.IText, fabric.Textbox)
  • serialization — Adds support for loadFromJSON, loadFromDatalessJSON, and clone methods on fabric.Canvas
  • interaction — Adds support for interactive features of fabric — selecting/transforming objects/groups via mouse/touch devices.
  • parser — Adds support for fabric.parseSVGDocument, fabric.loadSVGFromURL, and fabric.loadSVGFromString
  • image_filters — Adds support for image filters, such as grayscale of white removal.
  • easing — Adds support for animation easing functions
  • node — Adds support for running fabric under node.js, with help of jsdom and node-canvas libraries.
  • freedrawing — Adds support for free drawing
  • gestures — Adds support for multitouch gestures with help of Event.js
  • object_straightening — Adds support for rotating an object to one of 0, 90, 180, 270, etc. depending on which is angle is closer.
  • animation — Adds support for animation (fabric.util.animate, fabric.util.requestAnimFrame, fabric.Object#animate, fabric.Canvas#fxCenterObjectH/#fxCenterObjectV/#fxRemove)

Additional flags for build script are:

  • requirejs — Makes fabric requirejs AMD-compatible in dist/fabric.js. Note: an unminified, requirejs-compatible version is always created in dist/fabric.require.js
  • no-strict — Strips "use strict" directives from source
  • no-svg-export — Removes svg exporting functionality
  • sourcemap - Generates a sourceMap file and adds the sourceMappingURL (only if uglifyjs is used) to dist/fabric.min.js

For example:

node build.js modules=ALL exclude=json no-strict no-svg-export

Examples of use

Adding red rectangle to canvas

<!DOCTYPE html>
    <canvas id="canvas" width="300" height="300"></canvas>

    <script src="lib/fabric.js"></script>
        var canvas = new fabric.Canvas('canvas');

        var rect = new fabric.Rect({
            top : 100,
            left : 100,
            width : 60,
            height : 70,
            fill : 'red'


Helping Fabric

Staying in touch

Follow @fabric.js, @kangax or @AndreaBogazzi on twitter.

Questions, suggestions — fabric.js on Google Groups.

See Fabric questions on Stackoverflow, Fabric snippets on jsfiddle or

Fabric on LibKnot.

Get help in Fabric's IRC channel — irc://


MIT License

Copyright (c) 2008-2015 Printio (Juriy Zaytsev, Maxim Chernyak)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:


  • A Textbox with text wrapping and box resizing (subclasses IText)

    A Textbox with text wrapping and box resizing (subclasses IText)

    For Issue 187. This is a more fully featured implementation than Pull Request 725.

    I need this feature for my product, so I fully intend to support this class if it is made official.


    Check it out a demo.

    Summary of features

    • Subclasses IText, so gets all of its goodness.
    • Text wraps as user types and/or resizes a Textbox. Works with all textAlign values.
    • User can change width of Textbox. Height is automatically set based on text wrapping. Font size and scale does not change.
    • Support for resizing in Groups. Only the width of a Textbox changes. The Textbox updates its scaleX/Y values to undo scale values of its parent Group so that font size remains the same.
    • Refactored the ton of this.text.split(this._reNewline) calls into a function that gets overwritten by subclasses.
    • Fixed bug in Justify text (was present in both Text and IText classes).
    • Tested on latest versions of Safari (OSX & iOS), Chrome (OSX & Win), Firefox and Internet Explorer.

    Open issues / TODOs

    1. Need to add support for Styles. It is not required for my usage of this widget so contributions are welcome.
    2. ~~Justify alignment needs to be fixed in IText.~~
    3. ~~Inheritance bug in IText.toSVG(). The callSuper in _setSVGTextLineText goes into a recursive loop if called on a Textbox object. It works fine if I replace the callSuper call with a call to a copy of Text._setSVGTextLineText. Have you encountered something like this before? Any opinions on how to fix this?~~

    Please list changes that you'd like me to make before this can be made official. I saw in the other pull request that @kangax wasn't too sure about the 'Textbox' name ... we can change it.

    opened by jafferhaider 160
  • Curve Text Feature [$200]

    Curve Text Feature [$200]


    Loving the product but we desperatly need curve text. I've seen that it's on the roadmap but would like to ask if there is any progress or anything that can be done to help?

    Great work guys!

    There is a $200 open bounty on this issue. Add to the bounty at Bountysource.

    feature bounty 
    opened by dean555 119
  • Site redesign [$305]

    Site redesign [$305]

    I wasn't sure if a site redesign is still on the table — it is mentioned here: — but I started to put something together that simplifies the homepage and encourages people to start with the tutorial or downloading the library.

    I think simplifying the features that are showcases on the home page, as users can easily click through to the full demos page.

    There are still some items that need to be added back in (twitter, github, flattr, etc.), but it is a start. If this is an acceptable first stab I will do some additional identity exploration and work to refine the design.


    There is a $305 open bounty on this issue. Add to the bounty at Bountysource.

    feature bounty 
    opened by aleph1 112
  • Global canvas zooming [$1,091 awarded]

    Global canvas zooming [$1,091 awarded]

    Posibility to zoom canvas (+/-) and all it's objects.

    Here are some ideas from @kangax:

    1. Programmatic canvas zooming One zoom level property (1 by default = normal zoom)
    2. UI for canvas zooming UI is a secondary thing; we can do it after implementing programmatic zooming. For this, we'll probably need to introduce another canvas mode, similar to free drawing mode. When in that mode, canvas would zoom on click or dblclick or whatever. You wouldn't be able to select objects (similar to free drawing mode).

    I like how zoom works in google docs. I think we should base off of that.

    Other ideas:

    • Touch device compatibility: Zoom in/out with touch

    The $1,091 bounty on this issue has been claimed at Bountysource.

    feature bounty 
    opened by Kienz 105
  • feat(IText): Draggable text

    feat(IText): Draggable text


    Adds support for native like text dragging! Out of the box! This PR aims to support text dragging, making fabric's text objects feel/behave like a HTML textarea. It is an expected interaction from the user's point of view.

    closes #7800


    • drag/drop event logic on canvas/text:
      • firing DnD events with more data for the dev
      • addressed an issue with firing order on drag over targets and the selected target
      • onDragStart and canDrop are public methods for overriding that control drag and drop respectively
      • dragStart logic cycle - imitates spec, invokes target's onDragStart method, if result is true drag starts. Behaves like onSelect.
      • creating a drag image from onDragStart
      • dragEnd calls _onMouseUp synthetically - the browser doesn't do it and fabric needs it to finalize interaction logic
    • cursor/selection rendering on text - in order to render text selection on the drag source while dragging and the cursor on the drop target while dragging over it (same as what the browser does)


    I think we ought to change the selectWord method to align with the behavior of html textarea which selects the word and all the trailing whitespace (it's important for drag and drop).

    TO DO

    • [x] perhaps wait for #7842 for DragEvent.dataTransfer
    • [ ] retina scaling for drag image - couldn't manage to fix the blur (will be handled in a follow up if ever)
    • [x] #7904

    ezgif com-gif-maker (11) ezgif com-gif-maker (12)

    opened by ShaMan123 93
  • fix(polyline): stroke bounding rect calculation

    fix(polyline): stroke bounding rect calculation

    Related Issues

    • #7478

    Proposed changes

    • ~~Created acos function in fabric.util to ensure the value is in the range [-1, 1] and the calcAngleBetweenVectors function is using it. This was causing a bug (see comment on commit bc93beb)~~
    • ~~In calcAngleBetweenVectors function, replaces Math.hypot(x, y) with Math.sqrt(x*x + y*y) to ensure equal results in both engines: Firefox and Chrome. (see comment on commit bc93beb)~~
    • ~~In getBisector function, checks if ro is close to zero instead of being strictly equal.~~
    • In calcAngleBetweenVectors function, calculate angle between two vector using atan2 instead of dot product. So eliminated the need to check the angle direction in getBisector function,
    • Changed the _setPositionDimensions function in the polyline class to adjust the width/height by the scale in case of uniform stroke.
    • Changed the projectStrokeOnPoints function to cover all stroke line join cases and also to uniform stroke. This function deserves further comment:

    In the case of open path, the stroke is rendered differently, so I calculated with the vectors orthogonal to the stroke. image

    In the case of the bevel, they are the points formed by the orthogonal to the vertex image

    In the case of the round, ~~if the angle is less than or equal to 90°,~~ the projection is calculated with two vectors parallel to the X and Y axes. ~~In the case of larger angles, it is calculated using the orthogonals.~~ image

    In the case of the miter, is the same calculation commented here:

    For a better view, see this link (you can change the vectors direction by holding the red circles) :


    Working example here:


    The red dotted vector is the bisector returned by the getBisector function. The green dotted vector is in the opposite direction and is what is used to determine which side to plot the projections. The projections are the colored vectors, one color for each point. To make debugging easier, you can configure the parameters (stroke line join type, strokeUniform, miterLimit, etc..)

    openPath = false and strokeUniform = true

    | Angle | Miter | Round | Bevel | |----------|:-------------:|:-------------:|:-------------:| | less than 90° | image | image | image | greater than 90° | image | image | image | equal to 180° | image | image | image |

    opened by luizzappa 83
  • Resized images pixelated - option for better downsampling available? [$300 awarded]

    Resized images pixelated - option for better downsampling available? [$300 awarded]

    Regarding!topic/fabricjs/N5LOujX-qMA it would be great to have an option for better resampling when scaling images with fabric:

    It looks like fabric.js currently uses only the browser's native/default (bilinear?) resampling capabilities, which usually result in very pixelated, low-quality images when scaling down.

    I would like to request a feature that avoids pixelation and resamples images to a higher quality especially when scaling down (similar to, e.g. when the user uses the scaling handles on an image element in a fabric.js canvas, or when the scaleX/Y or width/height properties are used.

    Depending on performance impact, this could happen during scaling, or when scaling has completed, but should yield a high quality scaled image in any case.

    Addendum: As far as text resampling suffers the same issue (which it may not), it would be ideal if that was addressed as well.

    The $300 bounty on this issue has been claimed at Bountysource.

    feature bounty 
    opened by NewsteadEric 83
  • fix(polyline): stroke bounding rect calculation typescript

    fix(polyline): stroke bounding rect calculation typescript

    I migrated the PR code to typescript and corrected the calculation when there is skew.

    closes #8083

    Related Issues

    • #7478

    Proposed changes

    • In calcAngleBetweenVectors function, calculate angle between two vector using atan2 instead of dot product. So eliminated the need to check the angle direction in getBisector function,
    • Changed the _setPositionDimensions function in the polyline class to adjust the width/height by the scale/skew.
    • Changed the projectStrokeOnPoints function to cover all stroke line join cases and also to uniform stroke.

    Working example

    Edit project-stroke-points-with-skew-correction (forked)


    The red dotted vector is the bisector returned by the getBisector function. The green dotted vector is in the opposite direction and is what is used to determine which side to plot the projections. The projections are the colored vectors, one color for each point. To make debugging easier, you can configure the parameters (stroke line join type, strokeUniform, miterLimit, etc..)


    This section details the calculation of projections for each type of stroke line join.



    • MDN:
    • Spec:
    • Playground to understand how the line joins works:

    1. Open path

    These cases differ in relation to the line-cap property (MDN reference)


    1.1 Butt

    The projections are calculated by two vectors orthogonal to the stroke.


    Scaling effect: only when the stroke is uniform that scaling affects the calculation of projections. It changes the position of the points (see more details here), so we must take it into account to have the new arrangement of the points.

    Skew effect: just apply distortion after projection calculation.

    1.2 Round

    Same as 2.3 Round

    1.3 Square

    Project a rectangle of points on the stroke in the opposite direction of the vector AT. The projections are the two vectors starting from the vertex pointing to the sides of the square.


    Scaling effect: only when the stroke is uniform that scaling affects the calculation of projections. It changes the position of the points (see more details here), so we must take it into account to have the new arrangement of the points.

    Skew effect: just apply distortion after projection calculation.

    2. Closed path

    There are three types of stroke line join (MDN reference) image

    2.1 Miter

    The corner is formed by extending the outer edges of the stroke at the tangents of the path segments until they intersect.


    Stroke miter limit: when two line segments meet at a sharp angle, it is possible for the join to extend, far beyond the thickness of the line stroking the path. The stroke-miterlimit imposes a limit on the extent of the line join, if so the join is converted from a miter to a bevel. (MDN reference)


    The ratio of miter length (distance between the outer tip and the inner corner of the miter) to stroke-width is directly related to the angle (alpha) of the bisector:

    $strokeMiterLimit = \frac{miterLength}{strokeWidth} = \frac{1}{sin(\alpha)}$

    Note: when the stroke is uniform, the arrangement of the points is changed (see explanation below), consequently the strokeMiterLimit. In this case we must recalculate this limit.

    Scaling effect : scaling changes the arrangement of points, hence the bisector calculation. Take a look:

    Plotting a triangle with the points:

    A (0, 0)
    B (50, -200)
    C (100, 0)


    The angle of the bisector is alpha.

    But when I apply a scaling of 2 only on the X axis, the angle of the bisector changes (beta < alpha), hence the miter vector too. To calculate this new angle we must apply the scaling on the points to find the new vectors that form A, B and C.


    scaleX = 2 ; scaleY = 1
    scaled A (0 * scaleX , 0 * scaleY) --> (0, 0)
    scaled B (50 * scaleX, -200 * scaleY) --> (100,-200)
    scaled C (100 * scaleX, 0 * scaleY) --> (200,0)

    With these vectors we were able to correctly calculate the miter vector.

    Skew effect: just apply distortion after projection calculation.

    2.2 Bevel

    The projections are both orthogonal to the vertex:


    Scaling effect: only when the stroke is uniform that scaling affects the calculation of projections. It changes the position of the points (see more details here), so we must take it into account to have the new arrangement of the points.

    Skew effect: just apply distortion after projection calculation.

    2.3 Round

    This case has calculation of projections differently if there is or not the presence of skew.

    2.3.1 Round without skew

    The projections are the two vectors parallel to the X and Y axes.


    Scaling effect: does not directly affect projections (only stroke size).

    2.3.2 Round with skew

    Projections are the points furthest from the vertex in relation to the direction of the X and Y axis respectively. See the example below.

    Consider this case: image

    There is a point $(X_i, Y_i)$ that will be the furthest Y (max Y) distance from the origin after applying skewY. This is our point of interest. image

    We have:

    [eq.1] $Y_{afterSkewY} = Y_i + X_i * Tan(skewY)$

    And we know that $X_i$ is a function of $Y_i$:

    $Y_i^2 + X_i^2 = r^2$ [eq.2] $X_i = \pm \sqrt{r^2 - Y_i^2}$

    Substituting eq.2 in eq.1 we have:

    $Y_{afterSkewY} = Y_i \pm \sqrt{r^2 - Y_i^2} * Tan(skewY)$

    So we have an equation in terms of just Y:

    $f(Y_i) = Y_i \pm \sqrt{r^2 - Y_i^2} * Tan(skewY)$

    The plus/minus sign represent both sides of the circle after skewY: image

    The furthest Y after skewY (max Y) distance from the origin are the maximum/minimun of $f(Y_i)$: image

    Computing $f'(Y_i)=0$ for both cases, we find:

    $Y_i = \pm \frac{r}{\sqrt{1 + Tan^2(skewY)}}$

    Substituting $Y_i$ into the circle equation, we find $X_i$:

    $X_i = \pm \sqrt{r^2 - Y_i^2}$

    That's our solution:


    We found the furthest point on the Y axis, now we need to calculate the furthest point on the X axis:


    In this case we have to take into account that if there is skewY it will affect skewX. The canvas first applies skewY and then applies skewX, so the point $(Xi, Yi)$ after applying skewX and skewY will look like this:

    1. First apply skewY: $(Xi, Yi + Xi * Tan(skewY))$
    2. Second apply skewX: $(Xi + (Yi + Xi * Tan(skewY)) * Tan(skewX), Yi + Xi * Tan(skewY))$

    That is, skewX is dependent on the result of skewY.

    So the equations we have to solve are:

    [eq.1] $X_{afterSkewX} = X_i + Y_i * Tan(skewX)$

    [eq.2] $Y_i = \sqrt{r^2 - X_i^2} \mp X_i * Tan(skewY)$

    Substituting eq.2 into eq.1:

    $X_{afterSkewX} = X_i + \sqrt{r^2 - X_i^2} * Tan(skewX) \mp X * Tan(skewY) * Tan(skewX)$

    Computing $f'(X_i)=0$ for both cases, we find:

    $X_i = \frac{r^2}{1 + \frac{Tan^2(skewX)}{(\pm Tan(skewX) * Tan(skewY) - 1)^2}}$

    Scaling effect: in the case of stroke uniform, we must remove the effect of the scale in the calculation of the farthests points,. Because of this, the equations are slightly modified.

    Calculating the furthest point on the Y axis:

    [eq.1] $Y_{afterSkewY} = Y_i * (1/scaleY) + X_i * (1/scaleX) * Tan(skewY)$

    [eq.2] $X_i = \pm \sqrt{r^2 - Y_i^2}$

    Substituting eq.2 into eq.1:

    $Y_{afterSkewY} = Y_i * (1/scaleY) \pm \sqrt{r^2 - Y_i^2} * (1/scaleX) * Tan(skewY)$

    Computing $f'(Y_i)=0$ for both cases, we find:

    $Y_i = \pm \frac{r * 1/scaleY}{\sqrt{(1/scaleY)^2 + (1/scaleX)^2 * Tan^2(skewY)}}$

    Calculating the furthest point on the X axis:

    [eq.1] $X_{afterSkewX} = X_i / scaleX + Y_i * Tan(skewX)$

    [eq.2] $Y_i = \sqrt{r^2 - X_i^2} / scaleY \mp X_i * Tan(skewY) / scaleX$

    Substituting eq.2 into eq.1:

    $X_{afterSkewX} = X_i / scaleX + \sqrt{r^2 - X_i^2} * Tan(skewX) / scaleY \mp X_i * Tan(skewY) * Tan(skewX) / scaleX$

    Computing $f'(X_i)=0$ for both cases, we find:

    $X_i = \frac{r^2}{1 + \frac{Tan^2(skewX) * scaleY^2}{(scaleX \mp scaleX * Tan(skewX) * Tan(skewY))^2}}$

    TO DO

    • [x] Bring here all the documentation that is in the PR
    • [x] Handle the case when skewX and skewY are applied at the same time when stroke line join is round (still buggy)
    • [x] Handle open path with strokeLinecap equals round and square
    • [x] Check if in the _set function when skew is applied, I need to invoke dimensioning for all line type joins
    • [x] Adjust to work correctly with skew (another PR)
    • [x] handle 1 point edge case: round projection?
    opened by luizzappa 78
  • Add support for static width/height of fabric.Text (text wrap)

    Add support for static width/height of fabric.Text (text wrap)

    Currently resizing a text element simple scales the text. This shouldn't be the case, instead resizing should re-define the bounding box around the text.

    You should also be able to change the behaviour of text overflow. This should be defined with a new (set|get)textOverflow property. Similar to the text-overflow CSS3 attribute. see:

    Similarly wrapping behaviour should be defined by the use of a new (set|get)wordWrap property. Similar to the CSS3 word-wrap attribute. See:

    Having it this way also then makes more sense for the textAlign properties. Text alignment should then be relative to the bounding box. Not the whole canvas! I'm not sure how you use these at the moment, but it's confusing none the less.

    I know re-writing the text element to remove cufon dependency is high on the Todo list, so when you start doing that if you could include the above changes I'd really appreciate it. Also looking forward to removing cufon, being able to use any css font will be so much better.

    I'd be happy to help contribute but I have no idea how far through the rewrite you already are. Please advise when/where you'd need help doing this.


    Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

    opened by ollym 76
  • Text on paths

    Text on paths

    @melchiar This PR contains the progress of text on a path, that i started right now. i ll push up every time i do a small progress.

    closes #729 closes #5900 closes #2544

    opened by asturur 69
  • text rendering changes

    text rendering changes

    This is the more updated code.

    closes #1814, #1897, #1905, #1581, #1940 Current situation: Current iText Drawing, showing BackGroundColor, TextBackgroundColor, selection behaviour immagine

    desired behaviour ( more or less ) image

    As of now this code changes the behaviour in this way: normal text: image

    itext: image

    opened by asturur 69
  • [Bug]: Transformation incorrect after rotation using the code from tutorials transformations

    [Bug]: Transformation incorrect after rotation using the code from tutorials transformations


    • [X] I agree to follow this project's Code of Conduct
    • [X] I have read and followed the Contributing Guide
    • [X] I have read and followed the Issue Tracker Guide
    • [X] I have searched and referenced existing issues and discussions
    • [X] I am filing a BUG report.
    • [X] I have managed to reproduce the bug after upgrading to the latest version
    • [X] I have created an accurate and minimal reproduction



    In What environments are you experiencing the problem?


    Node Version (if applicable)


    Link To Reproduction

    Steps To Reproduce

    1. open
    2. bind minion to boss
    3. rotate the boss for several times and stop at a specific angle

    Expected Behavior

    the minion 's left and top is aligned to the boss Screen Shot 2023-01-08 at 18 27 10

    Actual Behavior

    the top / left is not aligned to the boss Screen Shot 2023-01-08 at 18 26 58

    Error Message & Stack Trace

    No response

    opened by universeroc 1
  • chore(TS): Add declare and remove useless methods from Object.

    chore(TS): Add declare and remove useless methods from Object.


    Finishing up basic object migration.


    • change the public properties to declare so that any transpiler understand those should be removed.
    • ~~added the default values in the constructor, while still making possible to change them globally before initialization of objects~~ failed / scope blown up
    • ~~cacheProperties and stateProperties needs to stay on prototype, having them as static is not really possible since it would require duplicating them for each class and would add another constrain when subclassing. Apparently static properties aren't usable with inheritance~~ failed / scope blown up
    • Fixed as much as possible TS complains, a couple have been ignored
    • Object._removeTransformMatrix moved as utility since is used only from the svg parser


    • removed Object.centerObject and similar. The methods were aliases for canvas counterparts with the added variable that they would be no-op if there wasn't a canvas. Seems jus confusing. Developers should call those methods from the canvas instance instead of relying on the fact that the canvas is maybe there maybe not and the code won't do nothing but won't fail


    In Action

    opened by asturur 41
  • Updated rollup dependencies

    Updated rollup dependencies


    This update seems to have no side effects on the build Just a reference branch to experiment with using exports




    In Action

    opened by asturur 11
  • Poly custom control

    Poly custom control


    Custom poly controls as part of fabric.js core.


    • Poly with skew
    • Poly with flip
    • Poly with strokeUniform



      const poly = canvas.getActiveObject();
      poly.controls = fabric.controlsUtils.PolyControl.createPolyControls(
        { cursorStyle: 'crosshair' } //pass custom options

    In Action


    opened by luizzappa 24
  • [Bug]: Sometime cannot load image from base64

    [Bug]: Sometime cannot load image from base64


    • [X] I agree to follow this project's Code of Conduct
    • [X] I have read and followed the Contributing Guide
    • [X] I have read and followed the Issue Tracker Guide
    • [X] I have searched and referenced existing issues and discussions
    • [X] I am filing a BUG report.
    • [X] I have managed to reproduce the bug after upgrading to the latest version
    • [X] I have created an accurate and minimal reproduction



    In What environments are you experiencing the problem?


    Node Version (if applicable)


    Link To Reproduction

    Steps To Reproduce

    1. I use fabric.Image.fromURL(base64) to add image to canvas, but sometime its show empty page. I logged callback from fromURL function below:
    • When website show empty canvas
    • When website show correct image

    Expected Behavior

    Show correct image

    Actual Behavior

    Show nothing

    Error Message & Stack Trace

    No response

    opened by huy-lv 1
  • refactor(): BREAKING Animation removing byValue, removing fxStraigthen.

    refactor(): BREAKING Animation removing byValue, removing fxStraigthen.


    I would like the animation code and interface to be simpler. So i m proposiing some simplificaiton, it makes also documenting animation easier.


    Removal some flexibility in the api in exchange of some code semplification

    i also create a folder parkinglot where i put the straighten code and i think i m putting the canvas effects too. Those needs to be changed in examples or something that the developer can grab, but i don't think they should be part of af the class itself. We have 4 effects, while the possibilities are so many that i think providing 4 of them and nothing else just makes noise.

    Other things i would like to solve:

    • keypath in animation. I don't have a solution right now but ideally i would like to list the cases in which a keypat is needed ( gradients i m sure and little else probably )
    • duality between byValue and endValue, i would like to keep one only.


    • Object.animate takes only an object with one or more properties
    • animate does not take += or -= anymore, we can write an addition or subtraction when we do the animation end value.
    • removed barrel imports
    • Object.animate does not undefine anymore the onChange and onComplete of multiple keys. Reasons are that with requestRenderAll that is not needed anymore, and since you can cancel a single animation, if you cancel the one that carry the actual callbacks the others are not working anymore. We need to be clear on the fact that you shoudn't do expensive things on onChange and that you should use requestRenderAll rather than renderAll.

    Some other proposals

    naming changes

    export type TOnAnimationChangeCallback<T, R = void> = (
      value: T,
      valueRatio: number,
      durationRatio: number
    ) => R;


    export type TOnAnimationChangeCallback<T, R = void> = (
      value: T,
      valueProgress: number,
      timeProgress: number
    ) => R;

    Reason: ratio is generic, can be 3, 4, -3 0.5. We have values here that are always between 0 and 1 and represent the progress between start and end. I think this naming would be more clear.


    In Action

    opened by asturur 16
  • v5.3.1(Dec 20, 2022)

    • fix(textStyles): Handle empty style object in stylesToArray ( (backported from
    • fix(util/misc.js): include textBackgroundColor in hasStyleChanged ( (backported from
    • feat(filters): Add a filtertype option when creating a texture #8528
    Source code(tar.gz)
    Source code(zip)
  • v5.2.4(Aug 25, 2022)

    fixed version

    Full Changelog:

    Fixed setStyle exception #7869

    Fixed IText focus issue #8179

    BREAKING: Text#toObject style property is changed from an object to an array at serialization #7842

    Source code(tar.gz)
    Source code(zip)
  • v5.2.3(Aug 25, 2022)

    What's Changed

    • Version 5.2.1 by @asturur in
    • feat(Text): condensed styles structure by @melchiar in
    • fix(): toDataless object restore with a single object svg and with clipPath by @asturur in
    • fix(Text) backport fromObject mutation fixes by @melchiar in

    Full Changelog:

    Source code(tar.gz)
    Source code(zip)
  • v521(Feb 21, 2022)

  • v520(Feb 21, 2022)

    • feat(fabric.Object): isType accepts multiple type #7715
    • chore(): Replace deprecated String.prototype.substr() with Array.prototype.slice() #7696
    • chore(): use Array.isArray instead of ie6+ workarounds #7718
    • MINOR: feat(fabric.Canvas): add getTopContext method to expose the internal contextTop #7697
    • fix(fabric.Object) Add cacheContext checks before trying to render on cache #7694
    • tests(): node test suite enhancement #7691
    • feat(Canvas#getCenter): migrate to getCenterPoint #7699
    • updated package.json 803ce95
    • tests(fabric.animation): fix test reliability 4be0fb9
    Source code(tar.gz)
    Source code(zip)
  • v510(Feb 16, 2022)

    • build(deps): bump node-fetch from 2.6.6 to 2.6.7 #7684
    • build(deps): bump follow-redirects from 1.14.6 to 1.14.8 #7683
    • build(deps): bump simple-get from 3.1.0 to 3.1.1 #7682
    • build(deps): bump from 6.1.0 to 6.1.2 #7681
    • fix(test): Remove expect assertion #7678
    • docs(blendimage_filter.class.js) corrected mode options #7672
    • chore(): Update #7659
    • fix(util.animation): remove extra animation cancel #7631
    • feat(animation): Support a list of animation values for animating matrices changes #7633
    • ci(tests): windows and linux paths resolutions #7635
    Source code(tar.gz)
    Source code(zip)
  • v500(Feb 5, 2022)

    Detailed breaking changes available at: here

    • fix(fabric.Canvas): unflag contextLost after a full re-render #7646
    • BREAKING: remove 4.x deprecated code #7630
    • feat(fabric.StaticCanvas, fabric.Canvas): limit breaking changes #7627
    • feat(animation): animations registry #7528
    • docs(): Remove not working badges #7623
    • ci(): add auto-changelog package to quickly draft a changelog #7615
    • feat(fabric.EraserBrush): added eraser property to Object instead of attaching to clipPath, remove hacky getClipPath/setClipPath #7470, see BREAKING comments.
    • feat(fabric.EraserBrush): support inverted option to undo erasing #7470
    • fix(fabric.EraserBrush): fix doubling opaic objects while erasing #7445 #7470
    • BREAKING: fabric.EraserBrush: The Eraser object is now a subclass of Group. This means that loading from JSON will break between versions. Use this code to transform your json payload to the new version.
    • feat(fabric.Canvas): fire an extra mouse up for the original control of the initial target #7612
    • fix(fabric.Object) bounding box display with skewY when outside group #7611
    • fix(fabric.text) fix rtl/ltr performance issues #7610
    • fix(event.js) Prevent dividing by 0 in for touch gestures #7607
    • feat(): drop:before event #7442
    • ci(): Add codeql analysis step #7588
    • security(): update onchange to solve security issue #7591
    • BREAKING: fix(): MAJOR prevent render canvas with quality less than 100% #7537
    • docs(): fix broken link #7579
    • BREAKING: Deps(): MAJOR update to jsdom 19 node 14 #7587
    • Fix(): JSDOM transative vulnerability #7510
    • fix(fabric.parser): attempt to resolve some issues with regexp #7520
    • fix(fabric.IText) fix for possible error on copy paste #7526
    • fix(fabric.Path): Path Distance Measurement Inconsistency #7511
    • Fix(fabric.Text): Avoid reiterating measurements when width is 0 and measure also empty lines for consistency. #7497
    • fix(fabric.Object): stroke bounding box #7478
    • fix(fabric.StaticCanvas): error of changing read-only style field #7462
    • fix(fabric.Path): setting path during runtime #7141
    • chore() update canvas to 2.8.0 #7415
    • fix(fabric.Group) realizeTransfrom should be working when called with NO parent transform #7413
    • fix(fabric.Object) Fix control flip and control box #7412
    • feat(fabric.Text): added pathAlign property for text on path #7362
    • docs(): Create #7405
    • docs(): Clarify viewport transformations doc #7401
    • docs(): specify default value and docs for enablePointerEvents #7386
    • feat(fabric.PencilBrush): add an option to draw a straight line while pressing a key #7034
    Source code(tar.gz)
    Source code(zip)
  • v460(Aug 27, 2021)

    • feat(fabric.util): added fabric.util.transformPath to add transformations to path points #7300
    • feat(fabric.util): added fabric.util.joinPath, the opposite of fabric.util.parsePath #7300
    • fix(fabric.util): use integers iterators #7233
    • feat(fabric.Text) add path rendering to text on path #7328
    • feat(fabric.iText): Add optional hiddenTextareaContainer to contain hiddenTextarea #7314
    • fix(fabric.Text) added pathStartOffset and pathSide to props lists for object export #7318
    • feat(animate): add imperative abort option for animations #7275
    • fix(Fabric.text): account for fontSize in textpath cache dimensions ( to avoid clipping ) #7298
    • feat(Observable.once): Add once event handler #7317
    • feat(fabric.Object): Improve drawing of controls in group. #7119
    • fix(EraserBrush): intersectsWithObject edge cases #7290
    • fix(EraserBrush): dump canvas bg/overlay color support #7289
    • feat(fabric.Text) added pathSide property to text on path #7259
    • fix(EraserBrush) force fill value #7269
    • fix(fabric.StaticCanvas) properly remove objects on canvas.clear #6937
    • feat(fabric.EraserBrush): improved erasing:end event #7258
    • fix(shapes): fabric.Object._fromObject never should return #7201
    • feat(fabric.filters) Added vibrance filter (for increasing saturation of muted colors) #7189
    • fix(fabric.StaticCanvas): restore canvas size when disposing #7181
    • feat(fabric.util): added convertPointsToSVGPath that will convert from a list of points to a smooth curve. #7140
    • fix(fabric.Object): fix cache invalidation issue when objects are rotating #7183
    • fix(fabric.Canvas): rectangle selection works with changing viewport #7088
    • feat(fabric.Text): textPath now support textAlign #7156
    • fix(fabric.EraserBrush): test eraser intersection with objects taking into account canvas viewport transform #7147
    • fix(fabric.Object): support excludeFromExport set on clipPath #7148.
    • fix(fabric.Group): support excludeFromExport set on objects #7148.
    • fix(fabric.StaticCanvas): support excludeFromExport set on backgroundColor, overlayColor, clipPath #7148.
    • fix(fabric.EraserBrush): support object resizing (needed for eraser) #7100.
    • fix(fabric.EraserBrush): support canvas resizing (overlay/background drawables) #7100.
    • fix(fabric.EraserBrush): propagate clipPath of group to erased objects when necessary so it is correct when ungrouping/removing from group #7100.
    • fix(fabric.EraserBrush): introduce erasable = deep option for fabric.Group #7100.
    • feat(fabric.Collection): the contains method now accepts a second boolean parameter deep, checking all descendants, collection.contains(obj, true) #7139.
    • fix(fabric.StaticCanvas): disposing canvas now restores canvas size and style to original state.
    Source code(tar.gz)
    Source code(zip)
  • v451(Jun 20, 2021)

    • fix(fabric.Text): fixes decoration rendering when there is a single rendering for full text line #7104
    • fix(fabric.Text): spell error which made the gradientTransform not working #7059
    • fix(fabric.util): unwanted mutation in fabric.util.rotatePoint #7117
    • fix(svg parser): Ensure that applyViewboxTransform returns an object and not undefined/null #7030
    • fix(fabric.Text): support firefox with ctx.textAlign for RTL text #7126
    Source code(tar.gz)
    Source code(zip)
  • v4.5.0(May 22, 2021)

    • fix(fabric.PencilBrush) decimate deleting end of a freedrawing line #6966
    • feat(fabric.Text): Adding support for RTL languages by adding direction property #7046
    • feat(fabric) Add an eraser brush as optional module #6994
    • fix v4: 'scaling' event triggered before object position is adjusted #6650
    • Fix(fabric.Object): CircleControls transparentCorners styling #7015
    • Fix(svg_import): svg parsing in case it uses empty use tag or use with image href #7044
    • fix(fabric.Shadow): offsetX, offsetY and blur supports float #7019
    Source code(tar.gz)
    Source code(zip)
  • v4.4.0(Apr 7, 2021)

    • fix(fabric.Object) wrong variable name cornerStrokeColor #6981
    • fix(fabric.Text): underline color with text style ( regression from text on a path) #6974
    • fix(fabric.Image): Cache CropX and CropY cache properties #6924
    • fix(fabric.Canvas): Add target to each selection event #6858
    • fix(fabric.Image): fix wrong scaling value for the y axis in renderFill #6778
    • fix(fabric.Canvas): set isMoving on real movement only #6856
    • fix(fabric.Group) make addWithUpdate compatible with nested groups #6774
    • fix(Fabric.Text): Add path to text export and import #6844
    • fix(fabric.Canvas) Remove controls check in the pixel accuracy target #6798
    • feat(fabric.Canvas): Added activeOn 'up/down' property #6807
    • feat(fabric.BaseBrush): limitedToCanvasSize property to brush #6719
    Source code(tar.gz)
    Source code(zip)
  • v4.3.1(Jan 27, 2021)

    • fix(fabric.Control) implement targetHasOneFlip using shorthand #6823
    • fix(fabric.Text) fix typo in cacheProperties preventing cache clear to work #6775
    • fix(fabric.Canvas): Update backgroundImage and overlayImage coordinates on zoom change #6777
    • fix(fabric.Object): add strokeuniform to object toObject output. #6772
    • fix(fabric.Text): Improve path's angle detection for text on a path #6755
    Source code(tar.gz)
    Source code(zip)
  • v4.3.0(Dec 23, 2020)

    • fix(fabric.Textbox): Do not let splitbygrapheme split text previously unwrapped #6621
    • feat(fabric.controlsUtils) Move drag to actions to control handlers #6617
    • feat(fabric.Control): Add custom control size per control. #6562
    • fix(svg_export): svg export in path with gradient and added tests #6654
    • fix(fabric.Text): improve compatibility with transformed gradients #6669
    • feat(fabric.Text): Add ability to put text on paths BETA #6543
    • fix(fabric.Canvas): rotation handle should take origin into account #6686
    • fix(fabric.Text): Text on path, fix non linear distance of chars over path #6671
    Source code(tar.gz)
    Source code(zip)
  • v4.2.0(Sep 26, 2020)

    • fix(fabric.utils): ISSUE-6566 Fix SVGs for special Arc lines #6571
    • fix(fabric.Canvas): Fix mouse up target when different from action start #6591
    • added: feat(fabric.controlsUtils): Fire resizing event for textbox width #6545
    • added: feat(fabric.controlsUtils) Move drag to actions to control handlers #6617
    Source code(tar.gz)
    Source code(zip)
  • v4.1.0(Aug 24, 2020)

    • feat(Brushes): add beforePathCreated event #6492;
    • feat(fabric.Path): Change the way path is parsed and drawn. simplify path at parsing time #6504;
    • feat(fabric.Path): Simplify S and T command in C and Q. #6507;
    • fix(fabric.Textbox): ISSUE-6518 Textbox and centering scaling #6524;
    • fix(fabric.Text): Ensure the shortcut text render the passed argument and not the entire line #6526;
    • feat(fabric.util): Add a function to work with path measurements #6525;
    • fix(fabric.Image): rendering pixel outside canvas size #6326;
    • fix(fabric.controlsUtils): stabilize scaleObject function #6540;
    • fix(fabric.Object): when in groups or active groups, fix the ability to shift deselect #6541;
    Source code(tar.gz)
    Source code(zip)
  • v3.6.6(Aug 23, 2020)

  • v3.6.5(Aug 23, 2020)

  • v3.6.4(Aug 23, 2020)

    • fix(fabric.Image): fix safari drawing bug for using drawImage outside element boundaries #6326
    • fix(fabric.Itext): fix copy paste of text with style #6418
    • fix(fabric.Itext): carry over style of selected test when replacing by typing (cherry-pick) #6172
    Source code(tar.gz)
    Source code(zip)
  • v4.0.0(Aug 6, 2020)

    • fixed the gesture module to not break with 4.0 #6491;
    • fix(fabric.IText): copy style in non full mode when typing text #6454;
    • feat(fabric.Controls) expose the extra utils for control handling. Breaking: rename fabric.controlHandlers and fabric.controlRenderers to fabric.controlsUtils.
    Source code(tar.gz)
    Source code(zip)
  • v4.0.0-rc.1(Jul 4, 2020)

    fix(fabric.Canvas): ISSUE-6314 rerender in case of drag selection that select a single oobject. #6421; feat(text): allow correct cursor/selection position if text is edited inside a group. #6256; feat(fabric.Control): remove position option in favor of x and y #6415; fix(fabric.Object) ISSUE-6340 infinite recursion on groups #6416; fix(fabric.Object): geometry mixin fix partiallyOnscreen #6402; fix(fabric.Image): ISSUE-6397 modify crossOrigin behaviour for setSrc #6414; Breaking: fabric.Image.setCrossOrigin is gone. Having the property on the fabric.Image is misleading and brings to errors. crossOrigin is for loading/reloading only, and is mandatory to specify it each load. Breaking: fabric.Control constructor does not accept anymore a position object, but 2 properties, x and y.

    Source code(tar.gz)
    Source code(zip)
  • v4.0.0-beta.12(May 3, 2020)

  • v4.0.0-beta.11(Apr 25, 2020)

    • fix(itext): improved style handling for new lines #6268
    • fix(controls): Fix flip and controls and skewY and controls. #6278
    • fix(controls): Current position with handlers is wrong if using skew #6267
    • breaking: setCoords has only one argument now skipCorners boolean. setCoords will always update aCoords, lineCoords. If skipCorners is not specified, it will alos update oCoords();
    • feat(fabric.Image): Image.imageSmoothing for fabric.Image objects #6280
    • fix(fabric.StaticCanvas): export to dataUrl and canvasElement will respect imageSmoothingEnabled #6280
    • fix(fabric.Image): toSVG export with missing element won't crash #6280
    • added: added fabric.util.setImageSmoothing(ctx, value);
    • added svg import/export for image image-rendering attribute
    • fix(svg_import): Fix some parsing logic for nested SVGs. #6284
    • fix(fabric.Image): do not crash if image has no element #6285
    Source code(tar.gz)
    Source code(zip)
  • v4.0.0-beta.10(Apr 5, 2020)

  • v4.0.0-beta.9(Mar 28, 2020)

    • fix(controls) show offsetX/offsetY correctly. #6236
    • fix(controls) ISSUE-6201 Restore per object setting of controls visibility #6226
    • fix(svg_parser): ISSUE-6220 Allow to parse font declaration that start with a number #6222
    Source code(tar.gz)
    Source code(zip)
  • v4.0.0-beta.8(Mar 20, 2020)

    • fix(IText) Stop composition events on mousedown to enable cursor position on android keyboards #6224
    • fix(controls): Handle textbox width change properly #6219
    • fix(controls): correctly handling the uniform scaling option #6218
    • fix(fabric.Object): fix activeSelection toDataURL canvas restore #6216
    • fix(svg_parsers): Add support for empty