raf.js

  mouseDown = (event) => {
    var mousePosition = {x: 0, y: 0};
    let rect = this.canvasRefWASM.current.getBoundingClientRect()
    const ctx = this.canvasRefWASM.current.getContext('2d');
    mousePosition.x = event.clientX - rect.left;
    mousePosition.y = event.clientY - rect.top;
    this.dragArray.push(mousePosition);
    const update = () => {
      //send image to WASM, get back frame and update WASMcanvas
      if(this.dragArray.length>0){
        let lastMouse = this.dragArray.pop();
        let newWASM = this.state.wasm.handle_mouse_down(
          this.state.sprayImg.width, 
          this.state.sprayImg.height, 
          this.canvasRefWASM.current.width, 
          this.canvasRefWASM.current.height,
          lastMouse.x,
          lastMouse.y,
          this.state.sprayImg.data);
        let newWASMclamped = Uint8ClampedArray.from(newWASM);
        var imgData = new ImageData(newWASMclamped, this.canvasRefWASM.current.width, this.canvasRefWASM.current.height)
        ctx.putImageData(imgData, 0, 0);
        requestAnimationFrame(update);
      }
    }
    update();
  }

  mouseMove = (event) => {
    this.mouseListener(event);
    if(this.state.mouseDown && this.state.sprayImg!=''){
      this.mouseDown(event)
    }
  }