let arrCanv = [0,0], 
    canvas, context, html = document.getElementsByTagName('html')[0],
    rnd = (min, max) => Math.floor(Math.random()*max+min);
html.textContent = '';
arrCanv = arrCanv.map((canvas, pos)=>{
    canvas = document.createElement('canvas');
    canvas.width = canvas.height = 300;
    context = canvas.getContext('2d');
    html.appendChild(canvas);
    context.fillStyle = '#FFF';
    context.fillRect(0,0, canvas.width, canvas.height);
    context.beginPath();
    for (var i = 0; i<= 20; i++) {
        context.beginPath();
        context.strokeStyle = '#'.concat( [0,0,0].map(()=>rnd(1, 256).toString(16) ).join(''));
        if (pos % 2 == 0) {
            context.arc(rnd(1, canvas.height), rnd(1, canvas.width), 20, 0, 2*Math.PI);
        } else {
            context.rect(rnd(1, canvas.height), rnd(1, canvas.width), 30, 30)
        }
        context.stroke();
        context.closePath();
    };
    context.fillStyle = '#000'
    context.font = (canvas.height/5).toString().concat("px serif");
    context.fillText("Dyrk.org", canvas.width/5, canvas.height/5);
    return {canvas:canvas, context:context};
});
blockToHideData = arrCanv[0].context.getImageData(0, 0, arrCanv[0].canvas.height, arrCanv[0].canvas.width);
blockWithData   = arrCanv[1].context.getImageData(0, 0, arrCanv[0].canvas.height, arrCanv[0].canvas.width);
for (var i = 0; i <= blockToHideData.data.length-1; i+=4) {
    binString = ['0','0','0','0','0','0','0','0'];
    blockToHideData.data[i].toString(2).split('').map((e,i)=>binString[i] =e);
    test = [blockWithData.data[i],blockWithData.data[i+1],blockWithData.data[i+2]].filter(e=>e<255).length-1 > 0;
    binString[7] = test ? '1' : '0';
    binString.map(e=>typeof e !='undefined' && e === 0 || e==1 ? e : 0);
    blockToHideData.data[i] = parseInt(binString.join(''), 2);
};
arrCanv[0].context.putImageData(blockToHideData, 0, 0);