Add multiple element to canvas with fabric js

Question

Sorry for my bad English. I want to learn the use of fabric.js.

For the basic commands I haven't had any problem. But I now have this problem.

I have two button in the index.html file :

<tr>
            <td><button id="caricarettangolo" onMouseDown="caricarettangolo(), caricatutto()" type="button"><img src="immagini/prodotti/rettangolo.svg" /></button></td></tr>
            <tr>
          <td><button type="button" onMouseDown="caricastella()"><img src="immagini/prodotti/stella.svg" /></button></td></tr>
        </tr>

and external js file with this code

    function caricacerchio() {
  var canvas = new fabric.Canvas('canvas');
  var circle = new fabric.Circle({
  radius: 20, fill: 'green', left: 100, top: 100
});
    canvas.getObjects();
    canvas.add(circle);
    canvas.selection = false; 
    canvas.renderAll();
    canvas.calcOffset(); 
    };

function caricarettangolo() {
    var canvas = new fabric.Canvas('canvas');
    var rect = new fabric.Rect({
    width: 50,
    height: 50,
    left: 50,
    top: 50,
    fill: 'rgb(255,0,0)'
});
    canvas.getObjects();
    canvas.add(rect);
    canvas.selection = true;
    canvas.renderAll();
    canvas.calcOffset(); 
    };

But I don't have the solution for seeing two elements.

I see the first element, next, if i push another button, this completely clears the canvas and adds the new element, but clears the first element. If I click in the canvas square, return the first created element. Why? As I can see when I have two different buttons two different element? Thanks.

Dan Brown · Accepted Answer · 2014-07-24 15:40:23Z

1

You're rendering on a new canvas every time you press the button:

 var canvas = new fabric.Canvas('canvas');

You want to render the canvas outside of your functions

 window.canvas = new fabric.Canvas('canvas');

then use the buttons to add them.

You can see an example here: http://jsfiddle.net/33MME/2/

answered Jul 24, 2014 at 15:40

Dan Brown

1,5251 gold badge9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add multiple element to canvas with fabric js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related