class Canvas {

  width;

  height;

  canvas;

  ctx;

  constructor(canvasElementId, width, height, mouseMove) {
    this.width = width;
    this.height = height;

    this.canvas = document.getElementById(canvasElementId);
    this.canvas.width = width;
    this.canvas.height = height;
    this.canvas.addEventListener('contextmenu', event => event.preventDefault());
    this.canvas.onmousemove = mouseMove;
    this.canvas.onmousedown = mouseMove;
    this.canvas.onmouseup = mouseMove;

    this.ctx = this.canvas.getContext("2d");
  }

  getPixelColor(event) {
    const colorArray = this.ctx.getImageData(event.offsetX, event.offsetY, 1, 1).data;
    const colorInt = (colorArray[0] << 16) | (colorArray[1] << 8) | colorArray[2];
    const colorHex = colorInt.toString(16);
    return "#" + colorHex.padStart(6, "0");
  }

  fillRect(x, y, color) {
    this.ctx.beginPath();
    this.ctx.fillStyle = color;
    this.ctx.rect(x * this.size, y * this.size, this.size, this.size);
    this.ctx.fill();
  }


}