tileGrid.js

class Grid {
  constructor(tileSize) {
    this.tileSize = tileSize;
  }

  createCanvas() {
    this.canvas = document.createElement('canvas');
    this.ctx = this.canvas.getContext('2d');
    this.canvas.width = this.width;
    this.canvas.height = this.height;
    this.ctx.font = (this.tileSize/2)+"px sans-serif";
  }

  appendCanvas() {
    document.body.appendChild(this.canvas);
  }

  loadImg(src) {
    let img = new Image();
    img.src = src;

    img.onload = () => {
      this.width = img.width;
      this.height = img.height;
      this.createCanvas();
      this.ctx.drawImage(img,0,0,img.width,img.height);
      this.build();
    };
  }

  saveImg() {
    //
  }

  build() {
    for (let r = 0; r < this.width/this.tileSize; r++) {
      this.ctx.fillRect(
        0,
        r*this.tileSize,
        this.width,
        1
        );
      for (let c = 0; c < this.height/this.tileSize; c++) {
        this.ctx.fillText(((c-1)*33)+1+r,r*this.tileSize,c*this.tileSize);
        this.ctx.fillRect(
          r*this.tileSize,
          0,
          1,
          this.height
          );
      }
    }
  }
}