Premiers pas avec fabricjs

Installation ou configuration

Fabric.js est comme n’importe quelle autre bibliothèque JS spécifique à canvas. Facile à configurer et à démarrer. Tout ce que vous avez à faire est de télécharger le fabric.js depuis [HERE][1] et de l’inclure dans votre projet comme n’importe quelle autre bibliothèque JS, par exemple comme vous le faites pour jQuery. Créez ensuite le fichier html supposons index.html comme :

<head>
    <script src="fabric.js"></script>
</head>

<body>
    <canvas id="canvas" width="400" height="400" style="border:2px solid #000000</canvas>
    <script>
        var canvas = new fabric.Canvas('canvas');
        canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
    </script>
</body>

l’attribut src dans le script fait référence à un fichier fabric.js conservé dans le même dossier, vous pouvez le conserver dans un autre dossier et donner un chemin relatif. Et vous êtes prêt à partir. Pour en savoir plus sur Fabric, visitez [Page officielle] [2]. Voici une [Démo][3] très basique

[1] : https://github.com/kangax/fabric.js/tree/master/dist [2] : http://fabricjs.com/ [3] : http://jsfiddle.net/kLdng24p/13/

Bonjour le monde

<canvas id="c" width="400" height="400"></canvas>
var canvas = new fabric.Canvas("c");
var text = new fabric.Textbox('Hello world From Fabric JS', {
            width:250,
            cursorColor :"blue",
            top:10,
            left:10
        });
canvas.add(text)

L’exemple crée un texte 'Hello world From Fabric JS' en utilisant fabricjs. [Démo][1]

[1] : http://jsfiddle.net/kLdng24p/17/