Salve a tutti, non so se qualcuno conosce fabric.js, la libreria JS che ti permette di potenziare le operazioni sul canvas.

Il mio problema è il seguente, tra l'altro credo che sia molto semplice la soluzione (comunque mi sono bloccato), ho i seguenti file:

index.html

codice:
<script type="text/javascript" src="js/fabric.js-master/dist/fabric.js"></script>
<script type="text/javascript" src="js/funzioni.js"></script>
...
<canvas width="800" height="600px" id="canvas"></canvas>
poi

funzioni.js

codice:
function testo() 
    {
            $("#sinistra").load("add/testo.html");
    }

function sagome() 
    {
        $("#sinistra").load("add/sagome.html");
    }

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(); 
    };
poi

sagome.html

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sagome per insegne</title>
</head>

<body>
          <table align="top" width="100%" border="0">
            <tr>
              <tr>
                <td>Sagome </td> 
                </tr>
            <br /><br /><br /> 
            </tr>
                  <td>
                  <button id="caricacerchio"  onclick="caricacerchio(), caricatutto()" type="button"> <img src="immagini/prodotti/cerchio.svg" /></button>
                </td>
               </tr>
             <tr>
                  <td><button id="caricarettangolo" onclick="caricarettangolo(), caricatutto()" type="button"><img src="immagini/prodotti/rettangolo.svg" /></button></td></tr>
                  <tr>
              <td><button type="button" onclick="caricastella()"><img src="immagini/prodotti/stella.svg" /></button></td></tr>
            </tr>
             <p><td><button type="button" onclick="rimuovirect()">Cancella tutto</button></td></tr></p>
            </tr>
          </table>
</body>
</html>

Il problema sta nel fatto che se clicco su un bottone questo mi disegna sul canvas il suo corrispondente, e fin qui ok, quando poi vado a cliccare su un'altro pulsante mi disegna anche l'altra sagoma cancellandomi la precedente, mi sta anche bene, ma la cosa assurda, di cui non riesco a venirne a capo e che quando clicco sul canvas per selezionare il secondo elemento creato, questo sparisce e mi si presenta sempre il primo. Quindi:
1) non riesco a far comparire due o più elementi contemporaneamente;
2) non riesco a far rimanere e selezionare gli elementi creati dopo il primo.

Ovviamente gli esempi sul sito ufficiale fanno di tutto e di più.

Dove sbaglio?