JSFiddle - React, Tailwind, and code Playground

by Anuraj MS

HTML

<div class="wrapper">
    <canvas id="c1" width="600" height="600"></canvas>
</div>

CSS

.wrapper {
    border: 1px solid #404040;
    display: inline-block;
}

JavaScript

var canvas = new fabric.Canvas('c1');

var circle = new fabric.Circle({
  radius: 100, fill: 'green', left: 100, top: 100
});

canvas.add(circle);

loadPattern('http://i0.wp.com/www.illustratoring.com/wp-content/uploads/2012/12/chevron-pattern-illustrator.png?resize=40%2C40', circle);

function loadPattern(url, obj){
	fabric.util.loadImage(url, function(img) {
		  obj.setPatternFill({
				source: img,
				repeat: 'repeat'
		  });
		  canvas.renderAll();
	});
}