crossorigin

by Darby Rathbone

HTML

<div id='out'>test</div>

CSS

body {
    width:auto;
    height:auto;
    position:relative;
}
img {
    position:fixed;
    left: -100%;
    bottom: -100%;
    width:0%;
    height:0%;
}

JavaScript

var image = "http://lorempixel.com/" + Math.ceil(600) + "/" + Math.ceil(600) + "/",

    img = new Image(),

    canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    data = function () {
        var debouncer;
        var a = {
            "width": canvas.width,
                "height": canvas.height,
                "imgd": ctx.getImageData(0, 0, canvas.width, canvas.height),
                "imgdata": ctx.getImageData(0, 0, canvas.width, canvas.height).data,
            "gp":function(x,y){
                
            var pos = (y * a.width + x) * 4;
                if(pos<0 || pos>a.imgdata.length || y<0 || y>a.width)
                    return false;
                return [].slice.call(a.imgdata,pos,pos+4);
            },
                "getPoint": function (x, y) {
                var values = [],
                    pos = (y * a.width + x) * 4;
                [].push.apply(values,[].slice.call(a.imgdata,pos,pos+4));
                values.sides = [];
 values.sides.push(a.gp( x, y - 1));
                 values.sides.push(a.gp( x, y + 1));
                 values.sides.push(a.gp( x - 1, y));
                   values.sides.push(a.gp( x + 1, y));
              values.sides = values.sides.filter(Boolean);
                return values;

            },
            setPoint: function (x, y, values) {
                var pos = (y * a.width + x) * 4;

                values.forEach(function (e, i) {
                    a.imgd.data[pos + i] = e;
                });

            },update:function(){
                ctx.putImageData(a.imgd, 0, 0);
                document.getElementById('out').textContent = 'finished';}
        };
        return a;



    },
    size;

document.body.appendChild(canvas);
img.crossOrigin = "Anonymous";
document.body.appendChild(img);
img.onload = function () {
    size = img.getBoundingClientRect();
    if (Math.abs((+canvas.width) - (+size.width)) > 1 || Math.abs((+canvas.height) - (+size.height)) > 1)...