JSFiddle - React, Tailwind, and code Playground

by 20yco

HTML

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

CSS

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

JavaScript

var img02URL = 'http://fabricjs.com/lib/pug.jpg';

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

//frame image, should be displayed fully.
canvas.setOverlayImage('http://cdn.1001freedownloads.com/vector/thumb/107559/Pink_Hearts_Frame.png', 		   canvas.renderAll.bind(canvas), {
        width: canvas.width,
        height: canvas.height 
    });
    //canvas.selection = false;

		//rectangle that hides everithing around it.
		var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.rect(50,50,300,300);
    ctx.closePath();
    ctx.stroke();
    ctx.clip();

		//the image that should stay inside the frame
		fabric.Image.fromURL(img02URL, function(oImg) {
    oImg.scale(.25);
    oImg.left = 140;
    oImg.top = 140;
    canvas.add(oImg);
    canvas.renderAll();
});