piotrrussw

  const onMove = useCallback(
    (event) => {
      if (drawing) {
        const newPosition = getCoordinates(event)
        if (position && newPosition) {
          drawLine(position, newPosition)
          setPosition(newPosition)
        }
      }
    },

piotrrussw

  const onDown = useCallback((event) => {
    const coordinates = getCoordinates(event)
    if (coordinates) {
      setPosition(coordinates)
      setDrawing(true)
    }
  }, [])

  const onUp = useCallback(() => {
    setDrawing(false)

piotrrussw

function ReactCanvasPaint(props) {
  const canvas = useRef(null)
  const [drawing, setDrawing] = useState(false)
  const [position, setPosition] = useState(null)

  return (
      <canvas
        ref={canvas}
        onMouseDown={onDown}
        onTouchStart={onDown}

piotrrussw

function ReactCanvasPaint(props) {
  return (
      <canvas
        ref={canvas}
        onMouseDown={onDown}
        onTouchStart={onDown}
        onMouseUp={onUp}
        onTouchEnd={onUp}
        onMouseLeave={onUp}
        onMouseMove={onMove}

piotrrussw

function ReactCanvasPaint(props) {
  return (
    <div className={styles.container}>
      <canvas
        width={props.width}
        height={props.height}
      />
    </div>
  )
}