title: putImageData doesn't change the imageData of the canvas
body: <p>From the code below you can see that I misunderstand how <code>putImageData</code> works:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// create canvas:
  let canvas = document.createElement("canvas");
  canvas.width = 2;
  canvas.height = 1;
  let ctx = canvas.getContext("2d");
  
  // grab its imageData:
  let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  console.log(imageData.data);
  
  // edit its imageData:
  imageData.data[0] = 10;
  console.log(imageData.data);
  
  // put the edited image data onto the canvas:
  ctx.putImageData(imageData, 0, 0);
  
  // check that the edited data is actually on the canvas:
  let finalImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  console.log(finalImageData.data);</code></pre>
  </div>
  </div>
  </p>
  <p>That code outputs these logs:</p>
  <pre><code>[0, 0, 0, 0, 0, 0, 0, 0]
  [10, 0, 0, 0, 0, 0, 0, 0]
  [0, 0, 0, 0, 0, 0, 0, 0]
  </code></pre>
  <p>I expected that last <code>console.log</code> to output <code>[10, 0, 0, 0, 0, 0, 0, 0]</code>. Where am I going wrong in my understanding here?</p>
  <p>(To be sure, I've tested with Firefox and Chrome - same result. Definitely seems like a very fundamental misunderstanding on my part.)</p>