I would like to develop a web application where you can write a number with the mouse and via machine learning the handwritten digit is then converted into a digital value. I use Angular for this and Tensorflow.JS for the AI.

My problem: I draw in the browser with a canvas, but as soon as I try to convert this canvas into an array (or a tensor), I only get 0 values as output, although something was drawn in the canvas.

My Code:

     ngOnInit(): void {
    this.loadModel();

    this.canvas = document.getElementById('can');
    this.context = this.canvas.getContext('2d', {preserveDrawingBuffer: true});
    this.canvas.height = 150;
    this.canvas.width = 150;
    this.context.lineWidth = 5;  //set the drawing line width to 10
    this.context.lineCap = "round";
    this.context.strokeStyle = "white";
    
    //Eventlisteners 
    this.canvas.addEventListener('mousedown', this.startPainting.bind(this)); //if the mouse is pressed in the canvas, the variable painting is set to true, so the program know that we are currently painting
    this.canvas.addEventListener('mouseup', this.endPainting.bind(this)); //if the mousepresse end, the variable painting is set to false, so the program know that the painting is finished
    this.canvas.addEventListener('mousemove', this.paint.bind(this)); //call function paint, if the mouse is moving
  } 

  //Method if mouse pressed
  startPainting() {
    this.painting = true;
  }

  endPainting() {
    this.painting = false;
    this.context.beginPath()
  }

  paint(e: MouseEvent) {

    if (this.painting == false) { //if the mouse is not pressed, we are not painting, nothing is going to happen
      return;
    }
    var rect = this.canvas.getBoundingClientRect();
    this.context.lineTo(e.clientX - rect.left, e.clientY - rect.top);
    this.context.stroke();
    this.context.beginPath();
    this.context.moveTo(e.clientX - rect.left, e.clientY - rect.top);
    this.context.stroke(); 
  }

  clear() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
  }

  canvasToTensor() {
   let tensor = tf.browser.fromPixels(this.canvas)
      .resizeNearestNeighbor([28, 28])
      .mean(2)
      .expandDims(2)
      .expandDims()
      .toFloat().
      div(255.0);       
      console.log(tensor.data())  
  }

That's the output: Usual Output

The model thing is unimportant, I'm really only interested in how I can convert my canvas drawing without only getting 0 values. If you need any more information, please let me know - I would be super grateful for any suggestions.