gistfile1.js

//I have the following in React that responds to a mousedown event.
//Unfortunately I don't know how to use requestAnimationFrame on this as I want to update the whole canvas
//and use putImageData from a WASM file.
//does anyone have any ideas?

  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;
    const update = () => {
      //send image to WASM, get back frame and update WASMcanvas
      let newWASM = this.state.wasm.handle_mouse_down(
        this.state.sprayImg.width, 
        this.state.sprayImg.height, 
        this.canvasRefWASM.current.width, 
        this.canvasRefWASM.current.height,
        mousePosition.x,
        mousePosition.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);
    }
    update();
  }