No Login Data Private Local Save

Handwritten Digit Recognizer - Online Canvas & Guess

Educational Machine Learning digit draw neural recognizer
59
0
0
0
8
|

Draw a single digit (0-9) in the center. Press Enter to recognize, Delete to clear.

Draw & tap Recognize

Tips for best results
  • Draw the digit large and centered
  • Use consistent stroke thickness
  • Avoid very thin or fragmented lines
  • Try to keep the digit within the dark area

Frequently Asked Questions

This tool uses a Convolutional Neural Network (CNN) trained on the famous MNIST dataset — a collection of 70,000 handwritten digits. When you draw a digit on the canvas, the image is scaled down to 28×28 pixels, converted to grayscale, centered, and fed into the neural network. The model outputs a probability for each digit (0–9), and the highest-scoring digit is displayed as the prediction. The model runs entirely in your browser using TensorFlow.js with WebGL acceleration.

MNIST (Modified National Institute of Standards and Technology) is the most widely used benchmark dataset in machine learning for handwritten digit recognition. It contains 60,000 training images and 10,000 test images, each being a 28×28 pixel grayscale image of a single handwritten digit (0 through 9). The dataset has been a standard for testing image classification algorithms since 1998, with state-of-the-art models achieving over 99.8% accuracy.

The underlying CNN model achieves approximately 99.2% accuracy on the standard MNIST test set. However, real-world accuracy on this canvas depends on how closely your handwriting resembles the MNIST training data. For best results, draw digits that are well-centered, reasonably sized, and use consistent stroke width. The model may struggle with highly stylized, very thin, or extremely thick digits that differ significantly from typical MNIST samples.

Neural networks are sensitive to input variations. Factors like stroke thickness, digit position, slant, and overall proportions all influence the 28×28 downscaled representation that the model sees. Even small changes can shift the predicted probabilities. This is actually a known characteristic of deep learning models — they learn statistical patterns from training data and may interpret ambiguous inputs differently. The top-3 predictions bar chart helps you see which digits the model is choosing between.

Once the model is downloaded and cached by your browser, the recognition can work without an internet connection. The TensorFlow.js library and the model weights are loaded from a CDN on first use. Subsequent visits may use the cached version. The entire inference runs locally on your device — no data is ever sent to any server. Your drawings remain completely private.

The preprocessing pipeline involves several steps: (1) The canvas image is extracted and converted to grayscale. (2) A bounding box is computed around the non-background pixels to find the digit. (3) The digit is centered within the bounding box and scaled to fit a ~20×20 region while preserving aspect ratio. (4) The result is placed into a 28×28 canvas with 4px padding on each side (matching MNIST conventions). (5) Pixel values are normalized to the [0, 1] range. This centering and scaling step is crucial — it can easily boost accuracy by 10-20% compared to raw downscaling.

Did You Know?

  • The MNIST dataset was created by Yann LeCun and colleagues in 1998, and it remains one of the most cited datasets in machine learning history.
  • A 28×28 grayscale image has 784 pixels — each serves as an input feature to the neural network.
  • Modern deep learning models can recognize MNIST digits with 99.9%+ accuracy, surpassing human performance (~99.8% for humans on ambiguous samples).
  • Handwritten digit recognition technology powers postal code sorting, bank check processing, and form digitization worldwide.
  • The term "convolutional neural network" comes from the mathematical convolution operation that slides filters across the image to detect features like edges and curves.
🔧 Related Tools