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.

An example of one of the dynamic image URL I'm using is: http://www.website.com/includes/dynamicimage.php?ID=29718958161

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:

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;

}

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.