JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<canvas id="c" width="400" height="400"></canvas>

CSS

#c {
    border:1px solid #ccc;
}

JavaScript

var img01URL = 'https://www.google.com/images/srpr/logo4w.png';
var img02URL = 'http://fabricjs.com/lib/pug.jpg';

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

var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.rect(10,10,150,150);
    ctx.rect(180,10,200,200);
    ctx.closePath();
    ctx.stroke();
    ctx.clip();

fabric.Image.fromURL(img01URL, function(oImg) {
    oImg.scale(.25);
    oImg.left = 50;
    oImg.top = 100;
    canvas.add(oImg);
    canvas.renderAll();
});

fabric.Image.fromURL(img02URL, function(oImg) {
    oImg.scale(.25);
    oImg.left = 300;
    oImg.top = 100;
    canvas.add(oImg);
    canvas.renderAll();
});