Valentin Antonio Bautista

I fell in love with software development_

© 2016

Fabric.js is a powerful and simple Javascript HTML5 canvas library

04 Nov 2016

Using Fabric.js For HTML5 Canvas Applications And Product Personalization Tools!

Test Using fabric.js in Magento ecommerce.

[-_-]

Using Fabric.js, you can create and populate objects on canvas; You can add text and dynamically manipulate its size, alignment, font family, and other properties, There’s built-in animation support, Canvas can be serialized to JSON or SVG, and restored at any time, You can group objects together, and manipulate them at the same time.

How use fabric.js?

Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes — rectangles, circles, ellipses, polygons, or more complex shapes consisting of hundreds or thousands of simple paths. You can then scale, move, and rotate these objects with the mouse; modify their properties — color, transparency, z-index, etc. You can also manipulate these objects altogether — grouping them with a simple mouse selection.

"Gosh, you say it like it's a bad thing" (GIF from the film "Clueless")

Example

<html>
<head>
	<title>vantonio</title>
</head>
<script src="fabric.js"></script>
<body>
<canvas id="canvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
<script>
        var canvas = new fabric.Canvas('canvas');

        var rect = new fabric.Rect({
            top : 100,
            left : 100,
            width : 60,
            height : 70,
            fill : 'red'
        });
        canvas.add(rect);
    </script>
</body>
</html>

demo

Optional modules for Fabric.js

"Gosh, you say it like it's a bad thing" (GIF from the film "Clueless")

How add text using fabric.js in canvas?

Create text object in canvas.

<html>
<head>
	<title>vantonio</title>
</head>
<script src="fabric.js"></script>
<body>
<h3>canvas in html5 using fabric.js </h3>
<canvas id="canvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
</body>
<script>
     var canvas = new fabric.Canvas('canvas');
     var text = new fabric.IText('vantonio', {
     left: 100,
     top: 100,
     fill: 'navy'
});
canvas.add(text);
</script>
</html>

demo

How insert in canvas a image with button using fabric.js?

<html>
<head>
    <title>vantonio</title>
</head>
<script src="fabric.js"></script>
<body>
<h3>canvas in html5 using fabric.js </h3>
<button id="i1">agregar imagen</button><br><br>
<canvas id="canvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
</body>
<script>
 var canvas = new fabric.Canvas('canvas');
       document.getElementById('i1').onclick=function(){
       fabric.Image.fromURL('http://www.logowik.com/uploads/images/511_android.jpg',function(oImg){
                oImg.scale(0.2).setFlipX(true);//tamaño
                oImg.left=60;//posición de la imagen
                oImg.top=90;
                canvas.add(oImg);
        })
 };
canvas.add(text);
</script>
</html>

demo

How clone object in canvas?

<html>
<head>
    <title>vantonio</title>
</head>
<body>
<h3>canvas in html5 using fabric.js </h3>
<script src="jquery.min.js"></script>>
<script src="fabric.js"></script>
<button id="c1">clonar objecto</button><br><br>
<canvas id="canvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
</body>
<script>
var canvas = new fabric.Canvas('canvas');
//agregar elementos a la lona
var circle = new fabric.Circle({
           radius: 20, 
           fill: 'red', 
           left: 100, 
           top: 100
           });
    canvas.add(circle);
var square = new fabric.Rect({
           left: 130, 
           top: 140,
           fill: 'green',
           width: 40,
           height: 80
           });
    canvas.add(square);  
    canvas.renderAll();

//evento del botón
$('#c1').on('click', function(event) {
    event.preventDefault();
      if(canvas.getActiveObject()) {
        var actObj = canvas.getActiveObject();  
            console.log('objecto clonado..'+actObj);      
            var clone = fabric.util.object.clone(canvas.getActiveObject());
            clone.set({left: actObj.left+Math.random()*10,top: actObj.top+Math.random()*10});
            clone.setCoords();
            canvas.add(clone); 
            canvas.renderAll();
      }
 });
</script>
</html>

demo

Example for products designer.

File .html

    <html>
    <head>
      <title>vantonio</title>
    </head>
     <script src="jquery.min.js"></script>>
     <script src="fabric.js"></script>
    <body>
      <h3>canvas in html5 using fabric.js </h3>
      <p>Color:</p>
        <select id="color" class="styled-select">
             <option value="#E00000">Rojo</option>
             <option value="#3CB371">Verde</option>
             <option value="#808080">Gris</option>
             <option value="#87CEFA">Azul</option>
             <option value="#FF9900">Naranja</option>
        </select>
    <canvas id="canvas" width="470" height="550" style="border:1px solid #d3d3d3;"></canvas>
    </body>
    </html>

File .js

var canvas = new fabric.Canvas('canvas');
       fabric.Image.fromURL('https://s5.postimg.org/mcnyutofb/mens_longsleeve_front.png',function(oImg){
            oImg.scale(0.9).setFlipX(true);//tmñ
            oImg.left=0;//posicion de imagen
            oImg.top=0;
            oImg.selectable=false;
            canvas.add(oImg);
        })
    canvas.backgroundColor = '#DEB887';
    canvas.renderAll();
    $('select#color').on('change', function() {
      canvas.backgroundColor = this.value;
        canvas.renderAll();
    });

demo

"Gosh, you say it like it's a bad thing" (GIF from the film "Clueless")