How to test html canvas experiments on Chrome locally

I wrote a simple canvas demo program but it doesn't seem to produce the required result. Here is my code:-

    window.onload = function(){
        var canv = document.getElementById('canv');
        var cxt = canv.getContext('2d');
        if(cxt){
            var myimg = document.getElementById('mypic');
            setTimeout(function(){
                cxt.drawImage(myimg,0,0,canv.width,canv.height);
                var edit = cxt.getImageData(0,0,canv.width,canv.height);
                var imgdata =  edit.data;
                for(var i=0;i<imgdata.length;i+=4){
                    imgdata[i] = 255;
  开发者_如何学C                  imgdata[i++] = 255;
                    imgdata[i+3] = 127;
                }
                cxt.putImageData(imgdata,0,0);
            }
            ,100);
            $('<p>Canvas Created</p>').appendTo('body');
        }
    };

Most likely one of two things is going wrong.

You are not waiting for your image to finish loading which might be a problem.

Or you are running in to a security exception. Calling getImageData is now allowed if an image has been loaded on to the canvas from an outside source. Your hard-drive constitutes an outside source, even if you are running locally. To see if this is the case I'd suggest debugging in FireFox because its web console will actually tell you about this security error.