Javascript PutImageData doing nothing

Question

I'm using the following code to replace the canvas with a solid color when run. The issue is that while the image is created it is not mapped to the canvas.

function draw() {
  var canvas = document.querySelector('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    const width = canvas.width;
    const height = canvas.height;
    var img = ctx.createImageData(width,height);
  for (var i = 0; i < img.data.length; i += 4) {
    img[i] = 20;
    img[i+1] = 125;
    img[i+2] = 0;
    img[i+3] = 255;
  }
  
    ctx.putImageData(img, 0, 0);
}}

More of the context may reveal enough to give this question a workable answer. See this guide: https://stackoverflow.com/help/minimal-reproducible-example — Mike Lyons, Jul 29 '21 at 19:34

score 0 · Accepted Answer · answered Jul 29 '21 at 03:49

You forgot to add .data when trying to access and change each index

function draw() {
  var canvas = document.querySelector('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    const width = canvas.width;
    const height = canvas.height;
    var img = ctx.createImageData(width,height);
  for (var i = 0; i < img.data.length; i += 4) {
    img.data[i] = 20;
    img.data[i+1] = 125;
    img.data[i+2] = 0;
    img.data[i+3] = 255;
  }
  
    ctx.putImageData(img, 0, 0);
}}
draw();

Javascript PutImageData doing nothing

1 Answers1