jQuery manipulating images via drawImage() and getImageData()

Question

I'm stuck with a problem. I want to convert green drawn strokes to yellow drawn strokes on an image.

So: I have an image, you draw on the image and you see green lines. Then, in another canvas, I want those green lines to be yellow.

I have this so far:

    </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>

I just can't figure out what's wrong. It draws the image on the left with the green strokes, but nothing on the right. Also, when I remove drawImage() it does work. (It draws the green & yellow line).

EDIT: I made a Fiddle to illustrate my problem: JSFiddle When you remove the <img> tag, everything works. But add it and nothing gets drawn on context2.

By the way, I am aware of the security issue regarding to canvasses. In the Fiddle I use an external domain, but in my own codes I use a local file.