Header add Access-Control-Allow-Origin "*" toDataURL not working

Question

This is what I have in my .htaccess file in my images folder on the webserver

# Do not remove this line, otherwise mod_rewrite rules will stop working 

RewriteBase /images

Header add Access-Control-Allow-Origin "*"

I also use the line: img.crossOrigin = 'Anonymous'; in my JS file but I still get the error.

Cross-origin image load denied by Cross-Origin Resource Sharing policy. 

Working example can be found here: http://jsfiddle.net/burton22/48JmQ/13/

var img = new Image();
img.onerror = function() {alert("error")};
img.onabort = function() {alert("abort")};

img.onload = function() {

    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img,0,0,120,120);        
        var dataURL = canvas.toDataURL('image/png');


    alert("success");
}

img.crossOrigin = 'Anonymous';
img.src = "http://www.bobbycash.net/images/sushithumb.png";

Just take a look at the console for the error.

It works after changing the image src attribute to img.src = "http://goo.gl/AOxHAL", but not for my images on my server. Any ideas why?

edit : ive even tried using this in my htaccess file and it still gives the same error

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>