import { KnitKit } from 'knitkit';

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const pattern = [
  [0, 2, 2, 0, 0, 0, 2, 2, 0],
  [2, 2, 2, 2, 0, 2, 2, 2, 2],
  [2, 2, 2, 2, 2, 2, 2, 2, 2],
  [0, 2, 2, 2, 2, 2, 2, 2, 0],
  [0, 0, 2, 2, 2, 2, 2, 0, 0],
  [0, 0, 0, 2, 2, 2, 0, 0, 0],
  [0, 0, 0, 0, 2, 0, 0, 0, 0]
];

const colorPalette = [
  "#faf2e8",
  "#1a1a1a",
  "#cd8470"
];

const stitchSize = 28;

KnitKit.render(ctx, pattern, {
  stitchSize,
  colorPalette,
  renderer: KnitKit.RenderBackend.WebGL,
});