Google collab - render pixel grid library

paint_pixels.py

#@title Canvas drawing library
import json
from typing import List
from IPython.display import HTML, Image
from google.colab.output import eval_js


canvas_html = """
<div style="font: 11pt monospace; color:red; white-space:pre" id="error"></div>
<canvas width="{0}" height="{1}" style="height:{0}px;width:{1}px" id="canvas"></canvas>
<textarea id="data" style="display:none">{2}</textarea>
<script>
  const calcGridWidth = grid => grid
  .map(r => r.length)
  .reduce((prev, cur) => cur > prev ? cur : prev, 0);

  const getCellSize = ([viewHeight, viewWidth], [tableHeight, tableWidth]) => {{
    if (tableWidth > tableHeight) {{
      return Math.round(Math.max(viewWidth, 1) / tableWidth);
    }}
  
    return Math.round(Math.max(viewHeight, 1) / tableHeight);
  }};

  const dex2hex = v => {{
    const val = Math.min(v, 255).toString(16);
    return v > 0xf ? val : '0' + val;
  }};

  const formatRgb = (rgb) => '#${{rgb.map(dex2hex)}}';
  const rgbFromShade = shade => {{
    if (isNaN(shade)) {{
      return 0xff;
    }}

    let color = dex2hex(shade);
    if (shade < 16) {{
      color = '0' + color;
    }}
  
    return '#' + color.repeat(3);
  }};

  const paint = (canvas, grid) => {{
    const ctx = canvas.getContext('2d');
    const cellSize = getCellSize(
      [+canvas.height, +canvas.width],
      [grid.length, calcGridWidth(grid)]
    );

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < grid.length; i++) {{
      for (let j = 0; j < grid[i].length; j++) {{
        const y = cellSize * i;
        const x = cellSize * j;
        const color = grid[i][j];
        
        ctx.beginPath();
        ctx.rect(x, y, cellSize, cellSize);
        ctx.lineWidth = cellSize;
        ctx.strokeStyle = rgbFromShade(color);
        ctx.closePath();
        ctx.stroke();
      }}
    }}
  }}

  const main = () => {{
    const input = document.querySelector('#data').value;
    const canvas = document.querySelector('#canvas');
    const {{ devicePixelRatio : dpi }} = window;

    canvas.height = {0} * dpi;
    canvas.width = {1} * dpi;

    try {{
      const data = JSON.parse(input);
      paint(canvas, data);
    }} catch (err) {{
      console.error(err);
      document.querySelector("#error").innerText = err.toString();
    }}
  }}

  main();
</script>
"""

def paint_pixels(height: int, width: int, data: List[List[int]]):
  payload = json.dumps(data)
  html = canvas_html.format(height, width, data)
  display(HTML(html))

print("canvas library loaded. Use paint_pixels() to draw image");