Poster

by soulwire

CSS

html, body {
  margin: 0;
  padding: 0;
}

Babel + JSX

const SIZES = {
	'B2': [50, 70],
  'POSTCARD': [10.4, 14.71]
}
const GUTTER = [1.6, 2.0];
const GRID = [4, 4];

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
document.body.appendChild(canvas);

const render = () => {
	const size = SIZES.B2;
  const width = (GRID[0] * (SIZES.POSTCARD[0] + GUTTER[0])) - GUTTER[0];
  const height = (GRID[1] * (SIZES.POSTCARD[1] + GUTTER[1])) - GUTTER[1];
	const margin = [(size[0] - width) / 2, (size[1] - height) / 2];
  
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

	const ratio = canvas.height / size[1];
  context.scale(ratio, ratio);
  context.lineWidth = 1/ratio;
  context.strokeRect(0, 0, size[0], size[1]);
  
  for (let i = 0; i < GRID[0] * GRID[1]; i++) {
  	const col = i % GRID[0];
    const row = Math.floor(i / GRID[0]);
    const x = margin[0] + col * (SIZES.POSTCARD[0] + GUTTER[0]);
    const y = margin[1] + row * (SIZES.POSTCARD[1] + GUTTER[1]);
    context.strokeRect(x, y, SIZES.POSTCARD[0], SIZES.POSTCARD[1]);
  }
}

render();