jquery - drawImage() および getImageData() を介して画像を操作する jQuery

Question

問題が発生しました。画像上の緑の描画ストロークを黄色の描画ストロークに変換したいと考えています。

だから：私は画像を持っています、あなたは画像に描くと緑色の線が見えます. 次に、別のキャンバスで、それらの緑の線を黄色にしたいと思います。

私はこれまでのところこれを持っています：

    </canvas>

    <canvas id="ball2" width="600px" height ="600px">

    </canvas>

    <img id="worldmap" src="worldmap.png" />

    <script type="text/javascript">
    // Set variables
    var a_canvas = document.getElementById("ball");
    var context = a_canvas.getContext("2d");

    var a_canvas2 = document.getElementById("ball2");
    var context2 = a_canvas2.getContext("2d");

    var img=document.getElementById("worldmap");

    var mouse_pos_x = [];
    var mouse_pos_y = [];

    var thickness = 0;

    var arraycount = 0;

    var mouse_down = false;

    var mouse_skip = [];

    function update(){
    }

    document.body.onmousedown = function(){
        mouse_down = true;
        mouse_pos_x.push(event.clientX);
        mouse_pos_y.push(event.clientY);
        arraycount += 1;
    }

    document.body.onmouseup = function() {
        if(mouse_down){
            mouse_down = false;
            mouse_skip.push(arraycount);
        }
    }

    document.body.onmousemove = function() {
        if(mouse_down){
            context.drawImage(img,0,0);
            mouse_pos_x.push(event.clientX);
            mouse_pos_y.push(event.clientY);
            context.lineWidth=2.5;
            context.strokeStyle="#00FF00";
            context.moveTo(mouse_pos_x[arraycount - 1], mouse_pos_y[arraycount - 1]);
            context.lineTo(mouse_pos_x[arraycount], mouse_pos_y[arraycount]);
            context.stroke();
            arraycount += 1;

            var imgdata = context.getImageData(0, 0, a_canvas.width, a_canvas.height);
            var l = imgdata.data.length / 4;

            for (var  i = 0; i < l; i++) {
                var r = imgdata.data[i * 4 + 0];
                var g = imgdata.data[i * 4 + 1];
                var b = imgdata.data[i * 4 + 2];
                if(g < 255){
                imgdata.data[i * 4 + 3] = 0;
            }
        }
        context2.putImageData(imgdata, 0, 0);
        }
    }

    setInterval(update,10);

    </script>

何が悪いのかわかりません。緑のストロークで左側に画像を描画しますが、右側には何も描画しません。また、 drawImage() を削除すると機能します。（緑と黄色の線を引きます）。

編集: 私の問題を説明するためにフィドルを作成しました: JSFiddleタグ を削除する<img>と、すべてが機能します。しかし、それを追加すると、context2 には何も描画されません。

ところで、キャンバスに関するセキュリティの問題は認識しています。Fiddle では外部ドメインを使用していますが、自分のコードではローカル ファイルを使用しています。