I trained a simple binary classifier on the MNIST dataset, achieving 99%+ accuracy on test data. However, when I integrate it into a React.js app where users draw digits on a canvas, the model completely fails at recognizing them. I have Perceptron class with those methods

  // step function (Heaviside function)
  // It cannot learn patterns like XOR, which require multiple layers. linearly separable data only
  // since it is not differentiable, it cannot be optimized using the gradient-base methods like propogation
  stepFunction(value) {
    return value >= 0 ? 1 : 0;
  }

  predictLabel(features) {
    let total = this.biasTerm;
    for (let i = 0; i < features.length; i++) {
      total += features[i] * this.weightParams[i];
    }
    return this.stepFunction(total);
  }

  trainModel(trainingSamples, targetLabels) {
    for (let i = 0; i < trainingSamples.length; i++) {
      let sampleInput = trainingSamples[i];
      const predictedOutput = this.predictLabel(sampleInput);
      const actualLabel = targetLabels[i];

      if (actualLabel !== predictedOutput) {
        for (let j = 0; j < this.weightParams.length; j++) {
          this.weightParams[j] +=
            this.learningRate *
            (actualLabel - predictedOutput) *
            sampleInput[j];
        }
        this.biasTerm += this.learningRate * (actualLabel - predictedOutput);
      }
    }
  }

This achieved 99%+ accuracy on test data. But it does not perform well on user-drawn images.

1. I normalized the train inputs and test inputs

   // traininputs and test inputs function preprocessImage(pixelArray) { return pixelArray.map((row) => row.map((pixel) => pixel / 255.0)); }

2. I removed low-intensity pixels to filter noise.

    const processedImages = testImages.data.map((image) =>
        // I pay with this variable NOISE_REMOVAL_THRESHOLD
        image.map((row) =>
          row.map((pixel) => (pixel >= NOISE_REMOVAL_THRESHOLD ? pixel : 0))
        )
      );
   

I am aware that MNIST digits are centered, thin, and well-defined so I draw numbers accordingly.

My MNIST model achieves high accuracy during training, but it fails to predict well when users write digits on a canvas. What are the key factors causing this gap, and how can I improve real-world performance?