Bedao L jigsaw illustrator

by darkkcyan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
<canvas id="can"></canvas>

CSS

canvas#can {
  border: 1px solid black;
}

JavaScript

// import * as dat from 'dat.gui';

const gui = new dat.GUI();

const data = {
  k: 2,
  r: 0,
  c: 0,
  cell_size: 10,
  line_width: 1,
  do_counting: 0,
  count: [0, 0, 0, 0]
};
const figure_colors = [
  "#648FFF",
  "#DC267F",
  "#FE6100",
  "#FFB000"
];

const UPPER_LEFT = 0;
const UPPER_RIGHT = 1;
const LOWER_RIGHT = 2;
const LOWER_LEFT = 3;

const canvas = document.getElementById("can");
const ctx = canvas.getContext('2d');

function draw_figure(type, size, r, c) {
  if (size == 1) {
  	data.count[type] ++;
    ctx.beginPath();
    const pr = r * data.cell_size;
    const pc = c * data.cell_size;
    const cs = data.cell_size;
    switch(type) {
      case UPPER_LEFT:
        ctx.moveTo(pc + cs, pr);
        ctx.lineTo(pc + 2 * cs, pr);
        ctx.lineTo(pc + 2 * cs, pr + 2 * cs);
        ctx.lineTo(pc, pr + 2 * cs);
        ctx.lineTo(pc, pr + cs);
        ctx.lineTo(pc + cs, pr + cs);
        break;
      case UPPER_RIGHT:
        ctx.moveTo(pc, pr);
        ctx.lineTo(pc + cs, pr);
        ctx.lineTo(pc + cs, pr + cs);
        ctx.lineTo(pc + 2 * cs, pr + cs);
        ctx.lineTo(pc + 2 * cs, pr + 2 * cs);
        ctx.lineTo(pc, pr + 2 * cs);
        break;
      case LOWER_RIGHT:
        ctx.moveTo(pc, pr);
        ctx.lineTo(pc + 2 * cs, pr);
        ctx.lineTo(pc + 2 * cs, pr + cs);
        ctx.lineTo(pc + cs, pr + cs);
        ctx.lineTo(pc + cs, pr + 2 * cs);
        ctx.lineTo(pc, pr + 2 * cs);
        break;
      case LOWER_LEFT:
        ctx.moveTo(pc, pr);
        ctx.lineTo(pc + 2 * cs, pr);
        ctx.lineTo(pc + 2 * cs, pr + 2 * cs);
        ctx.lineTo(pc + cs, pr + 2 * cs);
        ctx.lineTo(pc + cs, pr + cs);
        ctx.lineTo(pc, pr + cs);
        break;
      default:
        console.error("Unsupported drawing type:", type);
    }
    ctx.fillStyle = figure_colors[type];
    ctx.strokeStyle = "black";
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    return ;
  }
  const hs = 1 << (size - 2);
  draw_figure(type, size - 1, r +...