AJAX | JS | DRAWING | WORKING

by Nick Hulea

HTML

<script src="http://hulea.org/gifs_try/js/gif.js"></script>
<canvas id="canvas1" style="z-index:1;"></canvas>
<div id="preloader" style="display:none;">
    <div id="status">
        <div id="percentage"></div>
    </div>
</div>

CSS

canvas {
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
html {
    width:100%;
    height:100%;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(255, 255, 255, 0.5);
    z-index:100;
}
#status {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 300px;
    height: 250px;
    background: rgba(255, 255, 255, 0.90);
    padding: 22px 32px;
    font-family:"Lucida Console", Monaco, monospace;
}
#status {
    font-size:75px;
    font-family:"Lucida Console", Monaco, monospace;
}

JavaScript

var can = document.getElementById("canvas1");
var ctx = can.getContext("2d");
var r;
var path;
var preloadAmount = 4;
var cache = [];
var imgurcache = [];
var convertCache = [];
var resultcache = [];
var rArray = [];
var convertedArray = [];
var ajaxlength = [];
var raster;
var background;
var imagesrc;
var numberofclicks = 0;
var imagesrcs;
var autoShowNext = false;
var value = isNaN(value) ? 0 : value;
var valueajax = isNaN(valueajax) ? 0 : valueajax;
can.width = window.innerWidth;
can.height = window.innerHeight;
w = window.innerWidth;
h = window.innerHeight;
can.addEventListener("mousemove", function (e) {
    var mouse = {
        x: e.pageX,
        y: e.pageY
    };
    requestAnimationFrame(function () {
        redraw(mouse);
    });
}, false);

can.addEventListener("mousedown", function (e) {
    var imgs = cache.shift();
    img.src = imgs.source.src;
}, false);

var img = new Image();
img.onload = function () {};
img.src = "http://placekitten.com/500/500";
var img2 = new Image();
img2.onload = function () {
    ctx.drawImage(img2, 0, 0, w, h);
};
img2.src = "http://placekitten.com/502/502";

function redraw(mouse) {
    ctx.save();
    ctx.beginPath();
    ctx.arc(mouse.x, mouse.y, 100, 0, Math.PI * 2, true);
    ctx.clip();
    ctx.drawImage(img, 0, 0, w, h);
    ctx.restore();
}
var mx = 0,
    my = 0;
window.addEventListener("mousemove", function (e) {
    mx = e.pageX;
    my = e.pageY;
});

function getMouse(e, canvas) {
    return {
        x: mx,
        y: my
    };
}

function base64(url) {
    var dataURL;
    var img = new Image(),
        canvas = document.createElement("canvas"),
        ctx2 = canvas.getContext("2d"),
        src = url; // insert image url here

    img.crossOrigin = "Anonymous";

    img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx2.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL('image/png');
        canvas = null;
        preload(dataURL);
   ...