Canvas создать объект JavaScript с методами

Question

Привет! Я запускаю JavaScript и нахожу некоторые проблемы с объектами.Я делаю красивый холст для подписи, но теперь мне нужно преобразовать его в объект с методами ...

Вот мой код холста:

const canvas = document.querySelector("#canvas");
const contenu = canvas.getContext("2d");
canvas.width = 150;
canvas.height = 80;
let signer = false;

function demarrer(e) {
  signer = true;
  dessiner(e);
}

function arreter() {
  signer = false;
  contenu.beginPath();
}

function dessiner(e) {
  if (!signer) return;
  contenu.lineWidth = 2;
  contenu.strokeStyle = "#000";

  contenu.lineTo(e.offsetX, e.offsetY);
  contenu.stroke();
  contenu.beginPath();
  contenu.moveTo(e.offsetX, e.offsetY);
}
canvas.addEventListener("mousedown", demarrer);
canvas.addEventListener("mouseup", arreter);
canvas.addEventListener("mousemove", dessiner);

#canvas{
border: 2px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<canvas id='canvas'></canvas>

и вот мой объект 'project'

const canvasElts = {
  canvas: document.querySelector("#canvas"),
  cont: this.canvas.getContext("2d"),
  signer: false,

  dessiner: e => {
    this.canvas.addEventListener("mousemove", e => {
      if (!this.signer) return;
      this.cont.lineWidth = 2;
      this.cont.strokeStyle = "#000";

      this.cont.lineTo(e.offsetX, e.offsetY);
      this.cont.stroke();
      this.cont.beginPath();
      this.cont.moveTo(e.offsetX, e.offsetY);
    });
  },

  demarrer: e => {
    this.canvas.addEventListener("mousedown", e => {
      this.signer = true;
      this.dessiner(e);
    });
  },

  arreter: e => {
    this.canvas.addEventListener("mouseup", e => {
      this.signer = false;
      this.cont.beginPath(e);
    });
  },

  eventCanvas: () => {
    this.canvas.width = 150;
    this.canvas.height = 80;
    this.arreter;
    this.demarrer;
    this.dessiner;
  }
};
canvasElts.eventCanvas();

#canvas{
border: 2px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<canvas id="canvas"></canvas>

проблема в том, что у меня нет ошибки консоли, чтобы помочь мне найти хороший способ ... Если кто-то может помочь мне, это было бы такотлично.

thx

Answer 1

first не используйте функцию стрелки ()=>{} внутри объекта используйте вместо него обычную функцию function(){}

second вызовите этот метод

/* not */ this.arreter; /*Do this*/ this.arreter();
/* not */ this.demarrer; /*Do this*/ this.demarrer();
/* not */ this.dessiner; /*Do this*/ this.dessiner();

есть правильный способ сделать это

const canvasElts = {
    canvas: document.querySelector("#canvas"),
    cont: this.canvas.getContext("2d"),
    signer: false,

    dessiner: function(e) {
      this.canvas.addEventListener("mousemove", e => {
        if (!this.signer) return;
        this.cont.lineWidth = 2;
        this.cont.strokeStyle = "#000";

        this.cont.lineTo(e.offsetX, e.offsetY);
        this.cont.stroke();
        this.cont.beginPath();
        this.cont.moveTo(e.offsetX, e.offsetY);
      });
    },

    demarrer: function(e) {
      this.canvas.addEventListener("mousedown", e => {
        this.signer = true;
        this.dessiner(e);
      });
    },

    arreter: function(e) {
      this.canvas.addEventListener("mouseup", e => {
        this.signer = false;
        this.cont.beginPath(e);
      });
    },

    eventCanvas: function() {
      this.canvas.width = 150;
      this.canvas.height = 80;
      this.arreter();
      this.demarrer();
      this.dessiner();
    }
  };
  canvasElts.eventCanvas();