JSFiddle - React, Tailwind, and code Playground

by gorelov

HTML

<script src=" https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="canvas" height="400px" width="400px"></canvas>

JavaScript

var canvas = new fabric.Canvas('canvas');
var circle = new fabric.Circle({ radius: 30, fill: '#f55', top: 300, left: 150});
canvas.add(circle);
/*canvas.setBackgroundImage('http://s24.postimg.org/tlmpetb8l/shape.png', canvas.renderAll.bind(canvas),{
                originX: 'left',
  originY: 'top'
});
*/
fabric.Image.fromURL('http://s24.postimg.org/tlmpetb8l/shape.png', function(img) {
   img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'});
   canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
})
circle.globalCompositeOperation = 'source-atop';