canvas.js

const listen = (type, target, callback, dom = document) => {
  let el = target;
  if (el) {
    el.addEventListener(type, (event) => callback(event), false);
  } else {
    console.error(`${type} event for ${target} fail.`); // eslint-disable-line
  }
}

class Element {
  constructor(x, y, width, heigth, color) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.heigth = heigth;
    this.areaX = x;
    this.areaY = y;
    this.color = color;
  }

  // draw(context) {
    // context.fillStyle = this.color;
    // context.fillRect(this.x, this.y, this.width, this.heigth);
  // }

  setPosition(x, y) {
    this.x = x;
    this.y = y;
  }

  hasPoint(x, y) {
    return x >= this.x && x <= (this.x + this.width) && y >= this.y && y <= (this.y + this.heigth);
  }
}


// Texto
class Text extends Element {
  constructor(x, y, width, heigth, color, text, size) {
    super(x, y, width, heigth, color);
    this.text = text || "OI";
    this.size = size || 20;
  }

  draw(context) {
    context.fillStyle = 'red';
    context.fillRect(this.x, this.y, this.width, this.heigth);
    context.fillStyle = this.color;
    context.font = `${this.size}px Arial`;
    context.fillText(this.text, this.x, this.y + (this.size * 0.77));
  }
}


// Quadrado
class Rect extends Element {
  constructor(x, y, width, heigth, color) {
    super(x, y, width, heigth, color);
  }

  draw(context) {
    context.fillStyle = this.color;
    context.fillRect(this.x, this.y, this.width, this.heigth);
  }
}


// Quadro - Canvas
class Canvas {
  constructor(canvasId) {
    this.canvas = document.getElementById(canvasId);
    this.context = this.canvas.getContext('2d');
    this.elements = [];
    this.isDragging = false;
    this.element = null;

    listen('mousedown', this.canvas, (event) => this.setMouseDown(event));
    listen('mouseup', this.canvas, (event) => this.setMouseUp(event));
    listen('mousemove', this.canvas, (event) => this.setMouseMove(event));
  }

  addRect(x, y, w, h, c) {
    this.elements.push(new Rect(x, y, w, h, c));
  }

  addText(x, y, c, text, size) {
    this.context.font = `${size}px Arial`;
    this.elements.push(new Text(x, y, this.context.measureText(text).width, size, c, text, size));
  }

  draw() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.elements.forEach(el => {
      el.draw(this.context);
    });
  }

  // Click start
  setMouseDown(event) {
    this.isDragging = true
    let c = this.canvas.getBoundingClientRect();
    let x = event.clientX - c.x;
    let y = event.clientY - c.y;

    for (let i = 0; i < this.elements.length; i++) {
      let el = this.elements[i];

      if (el.hasPoint(x, y)) {
        this.element = el;
        this.canvas.style.cursor = 'move';
        break;
      } else {
        this.element = null;
      }
    }
  }

  // Click over
  setMouseUp(event) {
    this.isDragging = false;
    this.canvas.style.cursor = 'auto';
  }

  // Move
  setMouseMove(event) {
    let el = this.element;
    let c = this.canvas.getBoundingClientRect();
    let x = event.clientX - c.x;
    let y = event.clientY - c.y;

    if (this.isDragging && !!el) {
      el.setPosition(x - el.width/2, y - el.heigth/2);
      this.canvas.style.cursor = 'move';
    }

    if (this.isDragging) {
      this.draw();
    }

    if (!!this.el) {
      this.canvas.style.cursor = 'auto';
    }
  }

}


let canvas = new Canvas('canvas');
canvas.addRect(100, 30, 50, 50, 'blue');
canvas.addRect(200, 30, 50, 50, 'black');
canvas.addText(100, 200, 'black', 'Joffily', 100);
canvas.draw();