Wrong boundingbox with path in fabric.js

Question

I have the path of a heart (below), but when I draw it on the canvas with fabric.js, the boundingbox is not displayed correctly. This happens even if I use setCoords(). Moreover, when I export the object to svg, the location of the heart is at the top of the boundingbox instead of the location it is displayed on the canvas.

var path = new fabric.Path("M248.078,5.883c-36.691-14.739-77.771-0.839-98.517,31.125C128.817,5.044,87.735-8.856,51.043,5.883 C9.354,22.632-10.863,70.009,5.887,111.696c16.06,39.98,143.314,139.607,143.314,139.607l0.359,0.28l0.36-0.28 c0,0,127.251-99.627,143.314-139.607C309.986,70.009,289.768,22.632,248.078,5.883z");

The jsfiddle, http://jsfiddle.net/mPhL2/

Does anyone know how to solve this, is this a bug?

Thanks!

Answer 1

It has something to do with the coordinates of the path. Let's do a simple example.

The blue triangle is defined with absolute coordinates and the selection if fine

It has been produced with

canvas = new fabric.Canvas('myCanvas', { selection: false });
var path = new fabric.Path('M 0 0  L 0 100 L 100  100 Z');
path.set({ left: 20, top: 0, fill: 'blue', });
canvas.add(path);
canvas.renderAll();

If we take relative coordinates as with the green triangle then the selection does not surround the object properly anymore.

canvas = new fabric.Canvas('myCanvas', { selection: false });
var path = new fabric.Path('M 20 20  l 0 100 l 100 0 Z');
path.set({ left: 20, top: 0, fill: 'green', });
canvas.add(path);
canvas.renderAll();

So if we take another path for the heart (copied out from wikipedia) it works.

canvas = new fabric.Canvas('myCanvas', { selection: false });
var path = new fabric.Path('M 272.70141,238.71731 \
    C 206.46141,238.71731 152.70146,292.4773 152.70146,358.71731  \
    C 152.70146,493.47282 288.63461,528.80461 381.26391,662.02535 \
    C 468.83815,529.62199 609.82641,489.17075 609.82641,358.71731 \
    C 609.82641,292.47731 556.06651,238.7173 489.82641,238.71731  \
    C 441.77851,238.71731 400.42481,267.08774 381.26391,307.90481 \
    C 362.10311,267.08773 320.74941,238.7173 272.70141,238.71731  \
    z ');    
var scale = 100 / path.width;
path.set({ left: 20, top: 0, scaleX: scale, scaleY: scale,  fill: 'red', });
canvas.add(path);
canvas.renderAll();