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

[vikasacharya16]

The black border is the whole canvas area

• when the rectangle is moved, it leaves a black traces which cannot be removed
• when rectangle is moved down it is hidden at some point. I think 75% of canvas is not working.

the working example is here Canvas Basic Snack

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;

[vikasacharya16]

I just got the answer, Since this library lacks proper documentation I'm not deleting this question.

change, ref={handleCanvas} to ref={(e) => handleCanvas(e, xAxis, yAxis)}
and, handleCanvas = (canvas) to handleCanvas = (canvas, x, y)
lastly add,

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