const BLOWUP = 4;
const WIDTH = 240;
const HEIGHT = 135;

export function IslandApplet() {
  const canvas = Object.assign(document.createElement("canvas"), {
    width: WIDTH * BLOWUP,
    height: HEIGHT * BLOWUP,
  } satisfies Partial<HTMLCanvasElement>);

  const cx = canvas.getContext("2d");
  if (!cx) {
    throw new Error("2D rendering context not supported");
  }
  cx.scale(BLOWUP, BLOWUP);

  cx.fillStyle = "red";
  cx.fillRect(0, 0, WIDTH, HEIGHT);
  cx.fillStyle = "blue";
  cx.fillRect(1, 1, WIDTH - 2, HEIGHT - 2);

  return [canvas];
}

(globalThis as any).IslandApplet = IslandApplet;