I am trying to load an image from a server.

The image is dynamically created on the server, which then passes the name [including the relative path] to the client for loading into a canvas.

There are 3 layers of canvas, setting the same size of image and loading image to one canvas.

Everything working fine for small images.
But for big images, [assuming above 9000 x 7000 px] it throws “Aw Snap” blue screen error.
Sometimes it managed to load the image but throw “Aw Snap” error by moving the mouse over the canvas, moving scroll bars or drawing a line over it.

I increased --disk-cache-size but didn't help.

Even Setting these values didn't help [ --disable-accelerated-2d-canvas, --blacklist-accelerated-compositing, --blacklist-webgl, --disable-accelerated-compositing, --disable-accelerated-layers]

Tested with IE and Safari - working fine but some delays.

Post your thoughts and hints. Any help is appreciated.

Here is my code

function LoadImage(imageUrl) {

    try {

        var image_View = document.getElementById(imageView);

        var image_Temp = document.getElementById(imageTemp);

        var image_Tempt = document.getElementById(imageTempt);

        var ctx = image_View.getContext(2d);



        var img = new Image();

        img.onerror = function() {

            alert('The image could not be loaded.');

        }

        img.onload = function() {

            image_View.width = img.width;

            image_View.height = img.height;

            image_Temp.width = img.width;

            image_Temp.height = img.height;

            image_Tempt.width = img.width;

            image_Tempt.height = img.height;



            ctx.clearRect(0, 0, image_View.width, image_View.height);

            ctx.drawImage(img, 1, 1, img.width, img.height);

        }



        img.src = imageUrl;

    }

    catch (err) {

        alert(err.message);

    }

}