无法去除移动对象的痕迹并且 canvas 的 75% 不起作用

Question

黑色边框是整个canvas区域

移动矩形时，会留下无法去除的黑色痕迹
当矩形向下移动时，它会隐藏在某个点。我认为 canvas 的 75% 都不起作用。

import React, { useState } from "react";
import { Text, View } from "react-native";
import Canvas from "react-native-canvas";

const App = () => {
  const [xAxis, setXAxis] = useState(100);
  const [yAxis, setYAxis] = useState(100);
  var ctx = "";

  const handleCanvas = (canvas) => {
    if (canvas) {
      ctx = canvas.getContext("2d");
      ctx.fillStyle = "blue";
      ctx.fillRect(xAxis - 50, yAxis - 50, xAxis, yAxis);
    }
  };

  const onstart = (evt) => {
    console.log("start", evt.nativeEvent.locationX);
    ctx.clearRect(xAxis - 50, yAxis - 50, xAxis, yAxis);
    setXAxis(evt.nativeEvent.locationX);
    setYAxis(evt.nativeEvent.locationY);
  };

  const onmove = (evt) => {
    console.log("move", evt.nativeEvent.locationX);
    ctx.clearRect(xAxis - 50, yAxis - 50, xAxis, yAxis);
    setXAxis(evt.nativeEvent.locationX);
    setYAxis(evt.nativeEvent.locationY);
  };

  const onrelease = (evt) => {
    console.log("release", evt.nativeEvent.locationX);
  };

  return (
    <View
      onStartShouldSetResponder={() => true}
      onResponderStart={onstart}
      onResponderMove={onmove}
      onResponderRelease={onrelease}
      style={{ flex: 1, alignItems: "center", backgroundColor: "green" }}
    >
      <Text>Drawing Pad</Text>
      <Canvas
        ref={handleCanvas}
        style={{ flex: 1, borderColor: "#000", borderWidth: 1 }}
      />
    </View>
  );
};

export default App;

Answer 1

我刚得到答案，因为这个库缺少适当的文档，所以我不会删除这个问题。

改变，ref={handleCanvas}到ref={(e) => handleCanvas(e, xAxis, yAxis)}
并且，handleCanvas = (canvas) 到 handleCanvas = (canvas, x, y)
最后补充，

      canvas.width = 350;
      canvas.height = 500;

无法去除移动对象的痕迹并且 canvas 的 75% 不起作用

traces of a moved object cannot be removed and 75% of canvas is not working

canvas

react-native