Hi Ive been trying to use the ctx.putImageData() instead of drawing each pixel one by one to save time. I've encountered a problem where when I try to change the width and height of the imageData nothing seems to happen.

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

function drawImageData(){
    var imgData = ctx.createImageData(10,10);
    var i;
    for (i = 0; i < imgData.data.length; i += 4) {
      imgData.data[i+0] = 255;
      imgData.data[i+1] = 0;
      imgData.data[i+2] = 0;
      imgData.data[i+3] = 255;
    }
    ctx.putImageData(imgData,0,0,0,0,canvas.width,canvas.height)
}

drawImageData();

the html code is just the basic template with a single canvas.