function throttleRedraw(target, props) {

  const {

    onstart,

    onmove,

    onend,

    ondraw,

    absolute,

  } = props;



  let frameReq = 0;

  let lastX = 0;

  let lastY = 0;

  let isTouch = false;

  let enabled = true;



  // This is the callback we will be passing to requestAnimationFrame().

  // It's just a proxy for the ondraw() function passed in the props object.

  const frameHandler = (now) => {

    if (ondraw) ondraw(now);

    frameReq = 0;

  };



  // The callback for the mousemove/touchmove events,

  // which in turn calls props.onmove() if it was specified.

  // If props.absolute is true, props.onmove() receives the x and y coordinates of the pointer;

  // otherwise, it receives the delta since the last update.

  const moveHandler = (event) => {

    if (onmove) {

      const newX = isTouch ? event.touches[0].clientX : event.clientX;

      const newY = isTouch ? event.touches[0].clientY : event.clientY;

      onmove(

        absolute ? newX : newX - lastX,

        absolute ? newY : newY - lastY,

        event

      );

      lastX = newX;

      lastY = newY;

    }



    // If we have not yet requested an animation frame since the last, do it now.

    if (!frameReq) {

      frameReq = window.requestAnimationFrame(frameHandler);

    }

  };



  // The callback for the mouseup/touchend events,

  // which in turn calls props.onend() if it was specified.

  const upHandler = (event) => {

    if (onend) onend(event);

    

    // Remove the event handlers we set at the start.

    if (!isTouch) {

      window.removeEventListener('mousemove', moveHandler);

      window.removeEventListener('mouseup', upHandler);

    }

    else {

      window.removeEventListener('touchmove', moveHandler);

      window.removeEventListener('touchend', upHandler);

      window.removeEventListener('touchcancel', upHandler);

    }

  };



  // Set the mousedown/touchstart event listeners on the target.

  // They're mostly the same, except for how the coordinates are obtained

  // from the event, and what additional event handlers need to be set.



  target.addEventListener('mousedown', (event) => {

    if (!enabled) return true;



    isTouch = false;

    event.preventDefault();

    lastX = event.clientX;

    lastY = event.clientY;

    if (onstart) onstart(lastX, lastY, event);



    window.addEventListener('mousemove', moveHandler);

    window.addEventListener('mouseup', upHandler);

  });



  target.addEventListener('touchstart', (event) => {

    if (!enabled) return true;



    isTouch = true;

    event.preventDefault();

    lastX = event.touches[0].clientX;

    lastY = event.touches[0].clientY;

    if (onstart) onstart(lastX, lastY, event);



    window.addEventListener('touchmove', moveHandler);

    window.addEventListener('touchend', upHandler);

    window.addEventListener('touchcancel', upHandler);

  });



  // Return an object that allows us to enable or disable listening for events,

  // and query the current enabled state.

  return {

    isEnabled: () => enabled,

    enable: (value) => { enabled = value; },

  };

}



const canvas = document.querySelector('canvas');

const rect = canvas.getBoundingClientRect();

const ctx = canvas.getContext('2d');



let x0, y0, x1, y1;



throttleRedraw(canvas, {

  absolute: true,



  onstart: (x, y) => {

    x0 = x - rect.left;

    y0 = y - rect.top;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = 'red';

  },

  onmove: (x, y) => {

    x1 = x - rect.left;

    y1 = y - rect.top;

  },

  ondraw: () => {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.fillRect(

      Math.min(x0, x1),

      Math.min(y0, y1),

      Math.abs(x1 - x0),

      Math.abs(y1 - y0)

    );

  },

});

<canvas width="400" height="400" style="border: 2px solid #888"></canvas>

function createPointer(target) {

    var currentTarget;

    var bounds;

    const types = {

        mouse: 1, touch: 2, move: 1, up: 2, end: 2, cancel: 2, start: 0, down: 0,

        names : "touchcancel,touchend,touchmove,touchstart,mousemove,mousedown,mouseup".split(","),

    }

    const pointer = {

        delta: {x : 0, y : 0},

        pos:   {x : 0, y : 0, coord(x,y) { this.x = x; this.y = y }},

        last:  {x : 0, y : 0, set from(src) { this.x = src.x; this.y = src.y }},

        down : false,

        active : false,

        changed : false,

        set position(coord) {

            pointer.last.from = pointer.pos;

            pointer.pos.coord(coord.clientX- bounds.left + scrollX, coord.clientY - bounds.top + scrollY);

            pointer.delta.x = pointer.pos.x - pointer.last.x;

            pointer.delta.y = pointer.pos.y - pointer.last.y;

        },

        set target(element){

            if(!element){

                types.names.forEach(event => removeEventListener(event, events) );

                currentTarget = undefined;

                pointer.active = false;

            }else {

                if (!currentTarget) { types.names.forEach(event => addEventListener(event, events) ) }

                currentTarget = element;

                bounds = element.getBoundingClientRect()

                pointer.active = true;

            }

            pointer.down = false;

            pointer.changed = true;

        }

    }

    const events = event => {

       // if (event.target === currentTarget) {

            const type = types[event.type.substring(5)];

            pointer.position = types[event.type.substring(0,5)] === types.touch ? event.touches[0] : event;

            if (type === types.down) {  pointer.down = true }

            else if (type === types.up) { pointer.down = false }

            pointer.changed = true;

            event.preventDefault();

      //  }

    }

    pointer.target = target;

    return pointer;

}





const rendering = (()=> {

    requestAnimationFrame(mainLoop);

    const canvas = document.querySelector('canvas');

    const ctx = canvas.getContext('2d');

    const pointer = createPointer(canvas);

    var update = false;

    

    function as(src) {  this.x = src.x; this.y = src.y }

    const drag = {

        active : false,

        start : {x : 0, y : 0, as},

        end : {x : 0, y : 0, as},

        draw() {

            ctx.fillStyle = "red";

            ctx.fillRect(

                Math.min(drag.start.x, drag.end.x), Math.min(drag.start.y, drag.end.y),

                Math.abs(drag.start.x - drag.end.x), Math.abs(drag.start.y - drag.end.y),

            )

        }

    }

    

    function checkPointer() {

        if (pointer.changed) {

            if (pointer.down) {

                if (!drag.active) {

                    drag.start.as(pointer.pos);

                    drag.active = true;

                }

                drag.end.as(pointer.pos);

                update = true;

            } else if (drag.active) {

                drag.end.as(pointer.pos);

                drag.active = false;

                update = true;

            }

            pointer.changed = false;

        }

    }

    

    function mainLoop(time) {

        checkPointer();

        if (update) {

            ctx.clearRect(0,0,canvas.width,canvas.height);

            drag.draw();

            update = false;

        }

        requestAnimationFrame(mainLoop);

    }

})();

<canvas width="400" height="400" style="border: 2px solid #888"></canvas>