title: Javascript draw dynamic image from URL onto canvas element
body: <p>I am attempting to draw a dynamic PNG image (one that is generated by a PHP script) onto a Canvas element using its URL. I can't really post exact URLs for pages I'm testing this out on, as you must be logged in to the website.</p>
  
  <p>An example of one of the dynamic image URL I'm using is: <a href="http://www.website.com/includes/dynamicimage.php?ID=29718958161" rel="noreferrer">http://www.website.com/includes/dynamicimage.php?ID=29718958161</a></p>
  
  <p>If you were logged into this particular website and pasted that URL into your address bar, it would correctly display the image. However, the following Javascript code is not properly drawing it onto the canvas element:</p>
  
  <pre><code>function checkImage(imageContext) {
      var canvas = document.createElementNS(
          'http://www.w3.org/1999/xhtml', 'canvas');
      canvas.width = imageContext.width;
      canvas.height = imageContext.height;
  
      var context = canvas.getContext("2d");
      var img = new Image();
      img.src = imageContext.src;
      context.drawImage(img, 0, 0);
  
      newWindow = window.open(imageContext.src, 'newWin', 'width=300,height=300');
      newWindow2 = window.open('', 'newWin2', 'width=300,height=300');
      newWindow2.document.body.appendChild(canvas);
  
      var imgd = context.getImageData(0, 0, imageContext.width,
          imageContext.height);
      var pix = imgd.data;
  }
  </code></pre>
  
  <p>I'm having two pop-up windows display both the dynamic image and what is drawn to the canvas, but the canvas is always blank. I am then attempting to do further RGB testing on the image after setting the "pix" variable, but since the image is never drawn to the canvas element, this step fails.</p>