I want to use this library but main feature of my application is undo & redo,Can you please guide me how could I handle it as you people did in http://printio.ru/ringer_man_tees/new

Regards,
Rizwan Ullah
[email protected]

Hi kangax -- I am pulling my hair out trying to save a canvas state and reload it later. I am having zero success with either loadFromJSON and loadFromDatalessJSON (by the way, what is datalessJSON?). I have tried to put some elements on my canvas (they are loaded from svg), save the canvas as JSON (canvas.toJSON) into a variable. Clear the canvas, try to reload using one of the 2 methods mentioned above, and keep getting errors... I have tried from a JSON file, errors as well. My JSON was valid (I checked), but maybe not for what is expected by Canvas... it is not described in the doc, is it?

code example:

Myapp.mycanvas = Myapp.canvas.toJSON();
Myapp.canvas.loadFromJSON(Myapp.mycanvas);

The error:

JSON.parse: unexpected character
[Break On This Error] var Cufon=(function(){var k=function()....Image.fromElement.async=true})(this);

Down the line, do you think you could post an example of loading the result of a saved canvas back into a blank canvas? I have not seen anything like that in the examples, kitchensink etc...

c.f.: http://jsfiddle.net/2T4t2/1/

Hi,

When an image failed to load either the callback is never caller (fromURL) or the script crashed (fromObject).
Would it be possible to add an onerror event on the image?

For example, here's the work-around I did:
In fabric.Image.fromObject and fabric.Image.fromURL just below img.onload

    img.onerror = function() {
      if (callback) {
        callback(null);
      }
      img = img.onerror = null;
    };

This way the callback is still fired with a null value letting me handle this the way I want.

_enlivenObjects also needs a slight change in the switch case image:

fabric[capitalize(o.type)].fromObject(o, function (o) {
              //adding if to prevent failed image to crash
              if (o !== null) { 
                  _this.insertAt(o, index);
              }

Anyway, thanks for the awesome job !

Transformation matrix bug here:

http://209.114.35.172/fabric/fabric-0.2.8.html
http://209.114.35.172/fabric/fabric-0.8.13.html
http://209.114.35.172/fabric/fabric-0.8.52.html

Cyan and purple objects are incorrectly translated.

HTML Canvas support scaling by doing ctx.scale(x,y), how is that functionality exposed in fabric.js?

I tried doing..
var ctx = canvas.getContext();
ctx.scale(650, 650);
..but that doesn't seam to do anything.

Also, is this is the right place to be asking such questions?

Is there a way to toggle whether selection/dragging is enabled?

Clicking on a pixel selects the element using the bounding box in the demo. I'd like to test if it's a transparent pixel for that element, and if so select the element below it, recursively. I couldn't find a way in the docs to do this, but I'd be glad to help to implement if given a few pointers.

It seems that all that it would take is to add a test in Element::containsPoint() such as:

      // we iterate through each object. If target found, return it.
      var iLines = target._getImageLines(target.oCoords),
          xpoints = target._findCrossPoints(x, y, iLines);

      // check if pixel is transparent
      var color = target.getPixelColor(x, y);

      // if xcount is odd then we clicked inside the object
      // For the specific case of square images xcount === 1 in all true cases
      if (color.alpha > 0 && ((xpoints && xpoints % 2 === 1) || target._findTargetCorner(e, this._offset))) {
        return true;
      }

But I couldn't find a 'getPixelColor' method or similar....

• removeActiveObject should actually remove object
• discardActiveObject (new method) should do what removeActiveObject currently does — removes selection from an object.

For DOM + events + XHR use (already included) APE library. For array, string and function helpers (e.g. Function#bind, Array#map, String#trim, etc.) — create small standalone module (possibly under Canvas.util).

I've been trying draw Polygons but am getting the error: "array[i] is undefined fabric.js/all.js Line 1647".

Example of tries:
canvas.add(new fabric.Polygon({
points: [obj1, obj2, obj3, obj4] //obj has .x and .y
}));

canvas.add(new fabric.Polygon({ 
    points: [[thisPathRect[0][0],thisPathRect[0][1]], [thisPathRect[1][0],thisPathRect[1][1]], [thisPathRect[2][0],thisPathRect[2][1]], [thisPathRect[3][0],thisPathRect[3][1]]]
}));

Any ideas? (There don't seam to be any example on how to create a Polygon in fabric.js, I guess my best bet apart from asking here is understanding http://kangax.github.com/fabric.js/docs/symbols/src/src_polygon.class.js.html ).

Currently exposed events are:

object:scaled,
object:modified,
object:moved,
object:selected

group:selected_
before:group:destroyed,
after:group:destroyed

selection:cleared, path:created, after:render, mouse:up

The problem is that some of these are low level ("mouse:up"), others are high level ("group:selected", "object:moved", etc.). They are also inconsistent — there's "object:scaled" but no "group:scaled"; there's "mouse:up" but no "mouse:down".

Need to take care of all this.

When having a lot of objects in the canvas, then saving it with toDatalessJSON and then loading it back into the canvas at another time (could be after a simple page reload) with loadFromDatalessJSON doesn't always keep the sorting (z-index) of layers as when you saved it. It seems to happen kinda random, some layers are still in the correct z-index, but some isn't.

I would guess that it has something with the load function to do with since you can with the same JSON get different result on each load

Animations could be real animations, now they are more like transformations. There are two ways to achieve it - by CSS3 animations or by js background-position changing. CSS3 would require adding dom element for every animation, so I guess js animation would be a better choice.
I wanted to make a fork for that myself, but any comments before I start coding would be nice.

Saving a fabric.js canvas with a background color as an image with the help of toDataURLWithMultiplier makes the background scale strange.

The problem can be reproduced in the kitchensink demo if you execute the following code:

canvas.backgroundColor = "#ff0000";
canvas.renderAll();
console.log(canvas.toDataURLWithMultiplier("jpeg", 0.3));  // Take the string and paste in in the address bar

The background only appears in the upper left corner and only covers about 1/9 of the whole canvas.

Using Google Chrome 15.0.865.1000 dev-m and Mozilla Firefox 3.6.13

Adding a rect element to any of test files breaks it when using parseSVGDocument method.

I use this to create a new canvas element:
fabricCanvas = new fabric.Element('canvasHTMLElementId');

After initialization the canvas css style attribute 'position' is set to 'absolute' and its 'top' and 'left' attribute to 0. Why? The result is that my element is placed at the left-top corner of the document!

Further I'm confused about that you are wrapping the canvas element in an div container and adding TWO further identical elements. My code results in this:

<div class="canvas_container" style="width: 738px; height: 80px; -moz-user-select: none;">
     <canvas class="canvas-container" width="738" height="80" style="width: 738px; height: 80px; position: absolute; left: 0pt; top: 0pt; -moz-user-select: none;"></canvas>
     <canvas class="canvas-container" width="738" height="80" style="width: 738px; height: 80px; position: absolute; left: 0pt; top: 0pt; -moz-user-select: none;"></canvas>
     <canvas id="canvasHTMLElementId" width="738" height="80" style="position: absolute; width: 738px; height: 80px; left: 0pt; top: 0pt; cursor: default;"></canvas>
</div>

I've played around with firebug and found out that if you add a "position: relative;" to the style of the <div> container at least my canvas is positioned correctly and RELATIVE to the position of the <div>. It then is at the position I've defined in my CSS file.

Please fix this. I can't use fabric.js with this bug.
I'm using Ubuntu 10.10 and Firefox 4.0.

Thanks a lot!
Lufti

It's not possible to set the rx and ry values of a Rect with its constructor.

var background = new fabric.Rect({
    left: 0,
    top: 0,
    fill: '#FF0000',
    width: 100,
    height: 100,
    active: false,

    rx: 10,
    ry: 10
});

It's only working if I set it after initialization:

var background = new fabric.Rect({
    left: 0,
    top: 0,
    fill: '#FF0000',
    width: 100,
    height: 100,
    active: false
});
background.rx = 8;
background.ry = 8;

Or am I missing something? ;)
greetz Lufti

Specifically IE8

Using the canvas.backgroundColor on a canvas with rounded corners overlaps the corners (creating a rectangle)

canvas {

-moz-border-radius: 1em; 
-webkit-border-radius: 1em; 
border-radius: 1em;

}

Then in js: canvas.backgroundColor = 'rgba(....)' triggers this.

If I load a JSON object that contains various objects (e.g. images, path-groups, triangles etc.) into fabric.Canvas the order of objects varies to the original order of the JSON object.
Is there a problem with loading images?

Examples:
1st times loaded => objects are placed incorrect

2nd times loaded => objects are placed correct

Objects:
cars => images
streets => images
rectangle, ellipse, triangle => rectangle, ellipse, triangle
street signs => svg
text => text

Thanks.

hi,
first off this is an awesome library. I'm using it for a pretty cool project which I will share soon.
The issue I'm running into is that on an object where obj.type="circle" (so, a circle object) the .radius property seems to be incorrect. Is that expected? Also, you would expect a 'getRadius()' method on a circle but I dont see it in the doc.
For now, getWidth()/2 will give the radius, but I feel that isnt the 'best' way. Just wanted to report this as an issue I ran into.
thanks

It would be quite useful to have underlays (images that are permanently in background).

It's easy to implement them if you don't want (or need) them to show when you call canvas.toDataURL: just set the parent div css: background: #ffffff url(image.png) no-repeat right top.

@kangax, any tips as to how I could implement this? I could do it.

It's currently not possible disable anti-aliasing right? I guess it should be done in the browsers implementation of canvas but while that's not here is it possible to work around it? What would be the optimal solution? At least for basic shapes.

This feature is desirable for people working with the "retro computer graphics style".

It would be nice to have perspective transforms in the future. Something like this:

http://acko.net/files/projective/index.html
http://stackoverflow.com/questions/3836036/mode7-like-perspective-transform-in-canvas

I saw a post about this topic written in april but still there is no module for undo & redo. I think it's an important for these kind of jobs. Is there any plan to do this?

mouse movement after loadFromJson causes a lot errors like "tl undefined" or "no property called 'top'"

adding a "setCoords()" and a "setupState" right before the insert in _enlivenObjects seems to fix it without any side effects.

Is it possible to disable dragging of some Objects?
Would be nice to have this feature.

Couldn't find anything in the code. I wasn't able to figure out how your dragging is working. May you give us a short explaination?

I’m trying to parse external SVG file using loadSVGFromURL() method and excanvas in IE, but nothing happens. I can’t even access callback values or alert simple message.
Everything works fine in other browsers.

I’ve tried with simple rectangle drawing and it works as it should, so I think it’s either invalid SVG file or I’m setting wrong some parameters.

Does excanvas (or fabric) have some limitations when trying to parse specific SVG files?

fabric.Text.set() can only set a single property. Can you please expand this functionality to set collections of name/value pairs (property-object).

Is it possible to move layers up (/front/moveToFront) and down (/back) in Fabric.js? Looked at the docs but couldnt really find anything saying anything about it.

Thanks

How can I draw curved lines like free-hand tool using fabric.js ?

Please help

An option on fabric.Object to toggle controls; when turned off, fabric.Canvas — which manages change of cursor when mouse is within area of a control — would leave cursor alone. So cursor wouldn't change, controls wouldn't render, and clicking+dragging controls area would not have any effect. In that "controls-off" state, it would still be possible to move object (which can already be disabled); cursor would still change on mouseover (which could already be disabled as well); and it would still be possible to select an object, group it, etc.

If an object is unselectable, would it be possible to somehow select the first selectable object behind that object? Any functions I've missed in the documentation that already does this?

I made another issue a while ago (#22) that would probably work very well together with this (selecting selectable object behind unselectable objects).

Thanks!

Do you have a solution for this problem (see screenshot)? The border lines are not set correctly for text-objects.
I used the latest version of all.js and the font delicous_500 from the project page.

With other fonts i have the same problem.

Thanks.

Hey,

we just spend a couple of hours trying to render text in a canvas, using cufon for the fonts. We have the assumption that the _render method in text.class.js is somehow not complete, as there is nothing happening that would render the text. Can you give us any hint how we can get it working?

The result we want is that we can specify font family and font color of the text, and make the text element resizable etc, like a normal canvas element. The rest of the library is awesome so far, so we'd rather not switch now.

Any hints very much appreciated!

I have noticed that using bringForward or sendBackward fails when the objects we are trying to move have their bounding box limits contained into a bigger object. If I move the object so it's bounding box is partially contained only, then the object will move up or down he stack... Looked at the source, it looks like it coming from the fact that those two methods use the intersectsWithObject method which must fail when one objects boundaries covers totally the other... bug?

E.g., for some of the util methods (fabric.util.addClass, etc.), so that existing, 3rd party methods could be used. Also see discussion with Garrett: ed4dca3#comments

Lots of code from Cufon is irrelevant to fabric

The Array#indexOf fallback doesn't correctly handle negative fromIndex values so large negative values can cause the browser to lock up.

var array = ['a', 'b', 'c'];
array.indexOf('c', -1e9); // this will lock up the browser

While Function#bind is impossible to get 100% spec compliant (it may not have the correct length, and will have a prototype property), you can make the bound function work as spec'ed when called as a constructor.

function Alien(type) {
  this.type = type;
}

var thisArg = {};
var Tribble = Alien.bind(thisArg, 'Polygeminus grex');

// `thisArg` should **not** be used for the `this` binding when called as a constructor
var fuzzball = new Tribble;
console.log(fuzzball.type); // expected "Polygeminus grex"

For example, this does NOT work right now:

c 0,-53.25604 43.17254,-96.42858 96.42857,-96.42857 53.25603,0 96.42857,43.17254 96.42857,96.42857

but this does (note intermediate "c")

c 0,-53.25604 43.17254,-96.42858 96.42857,-96.42857 c 53.25603,0 96.42857,43.17254 96.42857,96.42857

Is it possible to select objects using Stage.getObjectUnderPoint()? For example, in http://kangax.github.com/fabric.js/test/demo/ when you add a triangle, when you click on white space in the triangle's bounding box, it's still selected. In this example (using easel.js) http://easeljs.com/examples/dragAndDrop.html objects are only 'selected' when an actual pixel of the object is clicked.

See implementation by @devongovett — http://gist.github.com/424839

I see in the demo that there is a "Rasterize canvas to image" option, but does fabric provide a way to export as SVG? If not, what would we need to do to implement that?

I see that it has been done in SVGCanvas: http://svgkit.sourceforge.net/tests/canvas_tests.html, but it looks like that is completely overriding the renderingcontext of the canvas. Without doing so, I could see it as not being possible to export the entire canvas, since you don't necessarily know what else has been added, but even if you were just able to export all of the fabric objects, that would be very nice.

Would it be possible to have the border with controls on an active object always on top (maybe in a new canvas above the one with objects)?

Say for example that you have a list of all the objects in the canvas in a sidebar where you can select objects to bring forward, delete, send backward etc. From this list, you select an object that gets activated in the canvas. The controls for resize, scale and rotate shows up around the object, but the object is behind another object and therefor the only thing that will happen is that you will select the object in front of the one you want to control.

Maybe it's already possible to have the controls above all objects in the canvas? I have missed stuff in the docs before, haha :)

What do you think about using Texty, a native canvas solution, for text rendering instead of Cufon?