gif painting working but super slow !!!
this is working but with a few problems 1. very slow 2. array shift needs to be implmented so it returns the next gif in the array. 3. mouse code need to be updated for performance .
by nhulea
HTML
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/AnimationFrame.js"></script>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/gif.js"></script>
CSS
canvas {
position:absolute;
top:0px;
left:0px;
}
JavaScript
var animationFrame = new AnimationFrame(30);
var ctxArray = [];
var ctx2Array = [];
var g = [];
var canvasArr = [];
function extractToken(hash) {
var match = hash.match(/access_token=(\w+)/);
return !!match && match[1];
}
var num = Math.floor(Math.random() * 50);
var token = extractToken(document.location.hash);
var clientId = "b144351ffb05838";
var auth;
if (token) authorization = "Bearer " + token;
else authorization = "Client-ID " + clientId;
$.ajax({
url: "https://api.imgur.com/3/gallery/random/random/page=" + num,
method: "GET",
headers: {
Authorization: authorization,
Accept: "application/json"
},
crossDomain: true,
data: {
image: localStorage.dataBase64,
type: "base64"
},
beforeSend: function () {
$("#preloader").css("display", "block");
},
success: handleData
});
function handleData(result) {
$.each(result.data, function (idx, image) {
if (result.data[idx].animated === true) if (result.data[idx].is_album === false) {
var newimage = gif(image.link);
}
});
}
window.addEventListener('mousedown', function (e) {
var newCanvasOne = document.createElement('canvas');
newCanvasOne.width = window.innerWidth;
newCanvasOne.height = window.innerHeight;
document.body.appendChild(newCanvasOne);
var newCtxOne = newCanvasOne.getContext('2d');
ctxArray.push(newCtxOne);
var newCanvasTwo = document.createElement('canvas');
newCanvasTwo.width = window.innerWidth;
newCanvasTwo.height = window.innerHeight;
document.body.appendChild(newCanvasTwo);
var newCtxTwo = newCanvasTwo.getContext('2d');
ctx2Array.push(newCtxTwo);
canvasArr.push(newCanvasOne);
});
window.addEventListener('mousemove',...