How To Make Mousemove Event Working For Touchscreen With Touchmove?

I'm working on a canvas javascript where with the mousemove event you can erase the background... Now i'm trying to get the same experience for touchscreens (mobile). How can I gi

Solution 1:

You can use the same event handler, but inside, you'll have to process the event differently, because there is no clientX nor clientY property on touch[XXX] events.

Touch events can be multi-touch, so they do hold an array of touches, which have these coordinate properties.

IMO a cleaner way would be to split your event handler in two different phases : one to extract the event's coordinates, and one to do something with these coords.

(function() {
  
  // a little verbose but...functionhandleMousemove(event){
    var x = event.clientX;
    var y = event.clientY;
    draw(x, y);
    }
  functionhandleTouchmove(event){
    event.preventDefault(); // we don't want to scrollvar touch = event.touches[0];
    var x = touch.clientX;
    var y = touch.clientY;
    draw(x, y);
    }
  // this one can be shared by both touch and move eventsfunctionactivateDrawing(event){
    event.preventDefault();
    canvas.isDrawing = true;
    }
  functiondraw(eventX, eventY){
    var x = eventX - canvas.node.offsetLeft;
    var y = eventY - canvas.node.offsetTop;
    if (!canvas.isDrawing) {
        return;
      }
    var radius = 100; // or whatevervar fillColor = '#ff0000';
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillCircle(x, y, radius, fillColor);
    }

  functioncreateCanvas(parent, width, height) {
    var canvas = {};
    canvas.node = document.createElement('canvas');
    canvas.context = canvas.node.getContext('2d');
    canvas.node.width = width || 100;
    canvas.node.height = height || 100;
    parent.appendChild(canvas.node);
    return canvas;
  }

  var canvas, ctx;  // got it out to avoid nesting too deeply my handlers;functioninit(container, width, height, fillColor) {
    canvas = createCanvas(container, width, height);
    ctx = canvas.context;
    // define a custom fillCircle method
    ctx.fillCircle = function(x, y, radius, fillColor) {
      var radgrad = ctx.createRadialGradient(x, y, 0, x, y, radius);
      radgrad.addColorStop(0, 'rgba(255,0,0,1)');
      radgrad.addColorStop(0.8, 'rgba(255,0,0,.9)');
      radgrad.addColorStop(1, 'rgba(255,0,0,0)');

      // draw shape
      ctx.fillStyle = radgrad;
      ctx.fillRect(x - radius, y - radius, x + radius, y + radius);
    };
    ctx.clearTo = function(fillColor) {
      ctx.fillStyle = fillColor;
      ctx.fillRect(0, 1, width, height);
    };
    ctx.clearTo(fillColor || "#ddd");

    // bind mouse events
    canvas.node.onmousemove = throttle(handleMousemove);
    canvas.node.ontouchmove = throttle(handleTouchmove);
    canvas.node.onmouseenter = 
    canvas.node.ontouchstart = throttle(activateDrawing);

  }

  var container = document.getElementById('canvas');
  init(container, 5000, 3000, '#f8fa58');

/* Bonus : throttle these events so they don't fire too often */functionthrottle(callback) {
  var active = false; // a simple flagvar evt; // to keep track of the last eventvar handler = function(){ // fired only when screen has refreshed
    active = false; // release our flag callback(evt);
    }
  returnfunctionhandleEvent(e) { // the actual event handler
    evt = e; // save our event at each callif (!active) { // only if we weren't already doing it
      active = true; // raise the flagrequestAnimationFrame(handler); // wait for next screen refresh
    };
  }
}

})();

body {
  margin-left: -10vw;
  margin-top: -30vh;
  background: url(https://i-d-images.vice.com/images/articles/meta/2014/10/21/untitled-article-1413860640.jpg?crop=1xw:0.44513137557959814xh;0xw,0.14219474497681608xh&resize=2000:*&output-format=image/jpeg&output-quality=75) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#canvas {
  z-index: -1;
  top: 2vh;
  left: -10vw;
  width: 110vw;
  height: 130vh;
  overflow: hidden;
}

<divid="back"></div><divid="canvas"></div>