damieng/image-grid.html

## image-grid.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
  <canvas id="myCanvas"></canvas>
  <br>
  <input type="file" id="inputFile" />
  <label>Columns <input type="text" id="cols" value="16" /></label>
  <label>Rows <input type="text" id="rows" value="16" /></label>
  <button onclick="render()">Redraw</button>
  <script>
    const canvas = document.getElementById('myCanvas');
    const context = canvas.getContext('2d');
    const image = new Image();
    document.getElementById('inputFile').onchange = loadImage;

    function loadImage() {
      image.onload = render;
      image.src = URL.createObjectURL(this.files[0]);
    }

    function render() {
      const cols = document.getElementById('cols').value;
      const rows = document.getElementById('rows').value;
      const charWidth = image.width / cols;
      const charHeight = image.height / rows;
      canvas.width = (charWidth + 1) * cols + 1;
      canvas.height = (charHeight + 1) * rows + 1;

      context.fillStyle = '#ff0000';
      context.fillRect(0, 0, canvas.width, canvas.height);

      for (var x = 0; x < cols; x++) {
        for (var y = 0; y < rows; y++) {
          context.drawImage(image,
            x * charWidth, y * charHeight,
            charWidth, charHeight,
            x * (charWidth + 1) + 1, y * (charHeight + 1) + 1,
            charWidth, charHeight);
        }
      }
    }

  </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>

	<body>
	<canvas id="myCanvas"></canvas>
	<br>
	<input type="file" id="inputFile" />
	<label>Columns <input type="text" id="cols" value="16" /></label>
	<label>Rows <input type="text" id="rows" value="16" /></label>
	<button onclick="render()">Redraw</button>
	<script>
	const canvas = document.getElementById('myCanvas');
	const context = canvas.getContext('2d');
	const image = new Image();
	document.getElementById('inputFile').onchange = loadImage;

	function loadImage() {
	image.onload = render;
	image.src = URL.createObjectURL(this.files[0]);
	}

	function render() {
	const cols = document.getElementById('cols').value;
	const rows = document.getElementById('rows').value;
	const charWidth = image.width / cols;
	const charHeight = image.height / rows;
	canvas.width = (charWidth + 1) * cols + 1;
	canvas.height = (charHeight + 1) * rows + 1;

	context.fillStyle = '#ff0000';
	context.fillRect(0, 0, canvas.width, canvas.height);

	for (var x = 0; x < cols; x++) {
	for (var y = 0; y < rows; y++) {
	context.drawImage(image,
	x * charWidth, y * charHeight,
	charWidth, charHeight,
	x * (charWidth + 1) + 1, y * (charHeight + 1) + 1,
	charWidth, charHeight);
	}
	}
	}

	</script>
	</body>

	</html>