JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<canvas />

JavaScript

var canvas = document.querySelector('canvas'),
		context = canvas.getContext('2d');
    
canvas.width = 1500;
canvas.height = canvas.width / 3;

var grid = [
	[1,1,1],
	[1,1]
];

grid.forEach(function (row, rowIndex) {
	row.forEach(function (column, columnIndex) {
  	var w = Math.floor(canvas.width / row.length),
    		h = Math.floor(canvas.width / grid.length),
    		x = w * columnIndex,
    		y = h * rowIndex;
        
    var imageContainerWidth = 300,
    		imageContainerHeight = 300;
        
    x += (w - imageContainerWidth) / 2;
    h += (w - imageContainerHeight) / 2;
    
    context.drawRect()
  });
});