Canvas is not updating

Question

for my learning purposes, I'm trying to copy this example. Everything seems to be fine, but for some reasons, canvas is not updating. Whenever the code executes, is terminated or done canvas is always 0px width 0px height. Maybe I'm doing some mistakes (for sure I should say), but I have no idea what can be wrong.

// create the network
const { Layer, Network } = window.synaptic;

var inputLayer = new Layer(2);
var hiddenLayer = new Layer(15);
var outputLayer = new Layer(3);

inputLayer.project(hiddenLayer);
hiddenLayer.project(outputLayer);

var myNetwork = new Network({
    input: inputLayer,
    hidden: [hiddenLayer],
    output: outputLayer
});

var imgRef = new Image();
imgRef.src = './reference.png';
var width = imgRef.width;
var height = imgRef.height;
imgRef.setAttribute('crossOrigin', '');

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var canvasd = ctx.getImageData(0 , 0, width, height)

var refCanvas = document.getElementById('canvas1');
var rctx = canvas.getContext('2d');

var refHTML = document.getElementById('reference');

rctx.drawImage(refHTML, 0, 0);

var ref = rctx.getImageData(0, 0, width, height);
imageData = ctx.getImageData(0,0,width,height);

// train the network - learn XOR
var learningRate = .1;

for (var i = 0; i < 20000; i++)
    {

        for (var x=0;x<width;x++){
            for(var y=0;y<height;y++){

                myNetwork.activate([x/width, y/height]);
                myNetwork.propagate(learningRate, pixel(ref.data, x,y));




                var rgb = myNetwork.activate([x/width,y/height]);

                imageData.data[((height * y) + x) * 4] = (rgb[0] )* 255;
            imageData.data[((height * y) + x) * 4 + 1] = (rgb[1] ) * 255;
            imageData.data[((height * y) + x) * 4 + 2] = (rgb[2] ) * 255;
            imageData.data[((height * y) + x) * 4 + 3] = 1;
            }
        }

        ctx.putImageData(imageData,0,0);


    }


function pixel(data,a,b){

    var red = data[((height*b)+a)*4];
    var green = data[((height*b)+a)*4 + 1];
    var blue = data[((height*b)+a)*4 + 2]

    return [red/225, green/225, blue/225]
}

Code is tested on Firefox.

Answer 1

On line var canvas = document.getElementById('canvas'); you are selecting a canvas element from the page. This can sometimes create a conflict between JS defined Width/Height and the CSS defined Width/Height.

try instead:

var canvas = document.createElement('canvas');
canvas.height = y;
canvas.width = x;