JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='test' width='400px' height='400px' style='background-color:orange;'></canvas>

JavaScript

var imgRes=['http://www.planethopia.info/wp-content/uploads/2010/02/space3.jpg',
           'http://www.star.ac.za/graphics/n11lmc_noao.jpg',
           'http://images.wikia.com/memoryalpha/en/images/5/54/Deep_space_9.jpg'];

var images=[new Image(),new Image(),new Image()];
for(var i=0;i<3;i++) {
    images[i].src=imgRes[i];
}

var canvas=document.getElementById("test"),
    ctx=canvas.getContext("2d");

// image[0]
ctx.save();
ctx.beginPath();
ctx.rect(5,5,190,190);
ctx.closePath();
ctx.clip();
ctx.drawImage(images[0],0,0);
ctx.restore();

// image[1]
ctx.save();
ctx.beginPath();
ctx.rect(5,205,190,190);
ctx.closePath();
ctx.clip();
ctx.drawImage(images[1],0,0);
ctx.restore();

// image[2]
ctx.save();
ctx.beginPath();
ctx.rect(205,5,190,390);
ctx.closePath();
ctx.clip();
ctx.drawImage(images[2],0,0);
ctx.restore();

// image[2]+++
ctx.save();
ctx.translate(200,200);
ctx.rotate(35*Math.PI/180);
ctx.beginPath();
ctx.rect(-80,-80,160,160);
ctx.closePath();
ctx.clip();
ctx.drawImage(images[2],-100,-100,200,200);
ctx.strokeStyle="#00ff80";
ctx.lineWidth=3;
ctx.stroke();
ctx.restore();