JSFiddle - React, Tailwind, and code Playground
by mkdizajn
HTML
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>
CSS
#c
{
background-color: green;
}
JavaScript
var canvas = new fabric.Canvas('c');
var radius = 150;
fabric.Image.fromURL('http://cdn.younghollywood.com/images/stories/newsIMG/wenn/20140901/wenn21338105_46_4145_8.jpg', function(oImg) {
oImg.scale(1.0).set({
left: 10,
top: 10,
stroke : 'white',
strokeWidth : 100,
clipPath: function (ctx) {
ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
}
});
canvas.add(oImg).setActiveObject(oImg);
canvas.renderAll();
});