Here tf.browser.fromPixels returns a tensor with only zeros. image.data contains values as expected (not only zeros). tfjs is loaded using a script tag. tfjs 1.0.0 but changing release does not help.
What can be wrong? Probably something stupid. I am new to Tensorflow.js...
<canvas id="canvas" width="100" height="100" style="border:1px solid #FF0000;"></canvas>
....
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = ctx.getImageData(0, 0, canvas.height, canvas.width);
var x = tf.browser.fromPixels(image);
When created, the canvas has all its pixel values set to 0.
var canvas = document.getElementById('canvas');
canvas is an imageData with only 0 values. It is no surprise that the tensor created has its values to 0 since the canvas used to created it does not have any image data except 0 values.
The CSS style does not change the underlying value of canvas. As a result, even if there is a border-color that is set to red, it is not reflected on the imageData.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var image = ctx.getImageData(0, 0, canvas.height, canvas.width);
var x = tf.browser.fromPixels(image);
console.log(x.shape) // height, width, 3
<html>
<head>
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0"> </script>
</head>
<body>
<canvas id="canvas" width="100" height="100" style="border:1px solid #FF0000;"></canvas>
</body>
</html>
The problem was that I used ctx.strokeStyle = '#000000' (black). But the canvas is already filled with 0 (as edkeveked said). This means that the drawing is not visible. What I saw as data was probably the alpha-channel but the alpha-channel is removed by fromPixels.
The solution is to use another strokeStyle than '#000000' and/or use ctx.fillRect with fillStyle = "#FFFFFF" (white).
So fromPixels is OK...
