JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.8/fabric.min.js"></script>
<canvas id="c" width="600" height="600"></canvas>

CSS

#c{
    border: 1px solid black;
}

JavaScript

var productImage = "http://cdn.skyje.com/wp-content/uploads/2011/01/Digitalink_Blank_T_Shirt_clip_art_hight.png"
var canvas = new fabric.Canvas('c');

var rect = new fabric.Rect({fill:'black', height: 20, width: 20});

canvas.clipTo = function(ctx) {
  ctx.arc(0, 0, 60, 0, Math.PI*2, true);
};
// or passing to fabric.Element options
new fabric.rect('myCanvas', {
  clipTo: function(ctx) {
    ctx.arc(0, 0, 60, 0, Math.PI*2, true);
  }
});

canvas.add(rect);