JSFiddle - React, Tailwind, and code Playground

by vla

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.0/fabric.min.js"></script>
<body>
    <canvas id="c-test" width="1000" height="1000"></canvas>
</body>

JavaScript

var canvas = new fabric.Canvas('c-test');
var radius = 300;

fabric.Image.fromURL('http://www.wallpaperswala.com/wp-content/gallery/cute-kitten/cute-golden-color-kitten.jpg', function(img) {

  img.scale(0.25).set({
    left: 200,
    top: 200,
    angle: -15,
    clipTo: function (ctx) {
      ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
    }
  });
  canvas.add(img).setActiveObject(img);


  //getting a pointer to the canvas also clears it!!!! 
  //canvas = new fabric.Canvas('c-test');
  console.log(JSON.stringify(canvas.toJSON()));
});