hi guys I need some help with my canvas, I try differeent ways to make it work in mobile devices but I can't. I try to launch the methodes that I create to start and stop the click events. But I think is not the rigth way.

class Canvas {
  constructor(emplacement, btnEffacer, btnCroix) {
    //btn pour effacer et afficher
    this.btnCroix = document.querySelector(".fermeture")
    this.btnEffacer = document.querySelector(btnEffacer);
    // emplacement du canvas
    this.canvas = document.querySelector(emplacement);
    this.cont = this.canvas.getContext("2d");
    //quelques variables
    this.signer = false;
    this.vide = true
    this.canvas.width = 190;
    this.canvas.height = 120;
    this.cont.lineWidth = 2;
    this.cont.strokeStyle = "#000";

    //les evenements
    //encer a dessigner
    this.canvas.addEventListener("touchstart", this.touchstart.bind(this), false);
    this.canvas.addEventListener("touchmove", this.touchmove.bind(this), false);
    this.canvas.addEventListener("touchend", this.touchend.bind(this), false);

    this.canvas.addEventListener("mousedown", this.demarrer.bind(this));
    //arreter de dessigner
    this.canvas.addEventListener("mouseup", this.arreter.bind(this));
    //le trece du dessin
    this.canvas.addEventListener("mousemove", this.dessiner.bind(this));
    //effacer le dessin
    this.btnCroix.addEventListener("click", this.effacer.bind(this));
    this.btnEffacer.addEventListener("click", this.effacer.bind(this));
  }
  //les methodes
  touchstart(e) {
    e.preventDefault()
    const touche = e.touches[0]
    this.demarrer(e)
  }

  touchmove(e) {
    e.preventDefault()
    const touche = e.touches[0]
    this.dessiner(e)
  }

  touchend(e) {
    e.preventDefault()
    this.arreter(e)
  }
  demarrer(e) {
    this.signer = true;
    this.vide = false
    this.dessiner(e);
  }

  arreter(e) {
    this.signer = false;
    this.cont.beginPath();
  }

  dessiner(e) {
    if (!this.signer) return;
    this.cont.lineTo(e.offsetX, e.offsetY);
    this.cont.stroke();
    this.cont.beginPath();
    this.cont.moveTo(e.offsetX, e.offsetY);
  }

  effacer() {
    this.cont.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.vide = true
  }

hi guys I need some help with my canvas, I try differeent ways to make it work in mobile devices but I can't. I try to launch the methodes that I create to start and stop the click events. But I think is not the rigth way.

class Canvas {
  constructor(emplacement, btnEffacer, btnCroix) {
    //btn pour effacer et afficher
    this.btnCroix = document.querySelector(".fermeture")
    this.btnEffacer = document.querySelector(btnEffacer);
    // emplacement du canvas
    this.canvas = document.querySelector(emplacement);
    this.cont = this.canvas.getContext("2d");
    //quelques variables
    this.signer = false;
    this.vide = true
    this.canvas.width = 190;
    this.canvas.height = 120;
    this.cont.lineWidth = 2;
    this.cont.strokeStyle = "#000";

    //les evenements
    //encer a dessigner
    this.canvas.addEventListener("touchstart", this.touchstart.bind(this), false);
    this.canvas.addEventListener("touchmove", this.touchmove.bind(this), false);
    this.canvas.addEventListener("touchend", this.touchend.bind(this), false);

    this.canvas.addEventListener("mousedown", this.demarrer.bind(this));
    //arreter de dessigner
    this.canvas.addEventListener("mouseup", this.arreter.bind(this));
    //le trece du dessin
    this.canvas.addEventListener("mousemove", this.dessiner.bind(this));
    //effacer le dessin
    this.btnCroix.addEventListener("click", this.effacer.bind(this));
    this.btnEffacer.addEventListener("click", this.effacer.bind(this));
  }
  //les methodes
  touchstart(e) {
    e.preventDefault()
    const touche = e.touches[0]
    this.demarrer(e)
  }

  touchmove(e) {
    e.preventDefault()
    const touche = e.touches[0]
    this.dessiner(e)
  }

  touchend(e) {
    e.preventDefault()
    this.arreter(e)
  }
  demarrer(e) {
    this.signer = true;
    this.vide = false
    this.dessiner(e);
  }

  arreter(e) {
    this.signer = false;
    this.cont.beginPath();
  }

  dessiner(e) {
    if (!this.signer) return;
    this.cont.lineTo(e.offsetX, e.offsetY);
    this.cont.stroke();
    this.cont.beginPath();
    this.cont.moveTo(e.offsetX, e.offsetY);
  }

  effacer() {
    this.cont.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.vide = true
  }

If you can explain me how it works and help me with the code, it will be great.

thanks for your help

• javascript
• canvas
• touch

2 Answers 2

It seems like you may be the keyword 'on' before your touch events.

The following three lines in your code:

this.canvas.addEventListener("touchstart", this.touchstart.bind(this), false);
this.canvas.addEventListener("touchmove", this.touchmove.bind(this), false);
this.canvas.addEventListener("touchend", this.touchend.bind(this), false);

Should actually be:

this.canvas.addEventListener("ontouchstart", this.touchstart.bind(this), false);
this.canvas.addEventListener("ontouchmove", this.touchmove.bind(this), false);
this.canvas.addEventListener("ontouchend", this.touchend.bind(this), false);

https://www.w3schools./jsref/obj_touchevent.asp

This page has a canvas you can draw on with your finger or mouse:

<!doctype html>
<html><head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head><body>
<canvas id='thecanvas' width='700' height='1000' style='touch-action:none;border:1px solid #cccccc;'></canvas>
<script>
let canvas = document.getElementById('thecanvas');

function canvas_read_mouse(canvas, e) {
    let canvasRect = canvas.getBoundingClientRect();
    canvas.tc_x1 = canvas.tc_x2;
    canvas.tc_y1 = canvas.tc_y2;
    canvas.tc_x2 = e.clientX - canvasRect.left;
    canvas.tc_y2 = e.clientY - canvasRect.top;
}

function on_canvas_mouse_down(e) {
    canvas_read_mouse(canvas, e);
    canvas.tc_md = true;
}

function on_canvas_mouse_up(e) {
    canvas.tc_md = false;
}

function on_canvas_mouse_move(e) {
    canvas_read_mouse(canvas, e);
    if (canvas.tc_md && (canvas.tc_x1 !== canvas.tc_x2 || canvas.tc_y1 !== canvas.tc_y2)) {
        let ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.moveTo(canvas.tc_x1, canvas.tc_y1);
        ctx.lineTo(canvas.tc_x2, canvas.tc_y2);
        ctx.stroke();
    }
}

function canvas_read_touch(canvas, e) {
    let canvasRect = canvas.getBoundingClientRect();
    let touch = event.touches[0];
    canvas.tc_x1 = canvas.tc_x2;
    canvas.tc_y1 = canvas.tc_y2;
    canvas.tc_x2 = touch.pageX - document.documentElement.scrollLeft - canvasRect.left;
    canvas.tc_y2 = touch.pageY - document.documentElement.scrollTop - canvasRect.top;
}

function on_canvas_touch_start(e) {
    canvas_read_touch(canvas, e);
    canvas.tc_md = true;
}

function on_canvas_touch_end(e) {
    canvas.tc_md = false;
}

function on_canvas_touch_move(e) {
    canvas_read_touch(canvas, e);
    if (canvas.tc_md && (canvas.tc_x1 !== canvas.tc_x2 || canvas.tc_y1 !== canvas.tc_y2)) {
        //alert(`${canvas.tc_x1} ${canvas.tc_y1} ${canvas.tc_x2} ${canvas.tc_y2}`);
        let ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.moveTo(canvas.tc_x1, canvas.tc_y1);
        ctx.lineTo(canvas.tc_x2, canvas.tc_y2);
        ctx.stroke();
    }
}

canvas.addEventListener('mousedown', (e) => { on_canvas_mouse_down(e) }, false);
canvas.addEventListener('mouseup', (e) => { on_canvas_mouse_up(e) }, false);
canvas.addEventListener('mousemove', (e) => { on_canvas_mouse_move(e) }, false);
canvas.addEventListener('touchstart', (e) => { on_canvas_touch_start(e) }, false);
canvas.addEventListener('touchend', (e) => { on_canvas_touch_end(e) }, false);
canvas.addEventListener('touchmove', (e) => { on_canvas_touch_move(e) }, false);
</script>
</body></html>