Skip to content

Instantly share code, notes, and snippets.

@naeluh

naeluh/index.html

Created August 20, 2014 19:07
Show Gist options
  • Save naeluh/ad4d000d8da80d081c09 to your computer and use it in GitHub Desktop.
Save naeluh/ad4d000d8da80d081c09 to your computer and use it in GitHub Desktop.
Download ZIP
Gif Painting Working 082014 Updated // source http://jsbin.com/lehiyo/2
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Gif Painting Working 082014 Updated" />
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
canvas {
position:absolute;
top:0px;
left:0px;
}
img {
width:0px;
height:0px;
}
html {
background-color:#fffccc;
}
</style>
</head>
<body>
<canvas></canvas>
<img id='gif' src="http://i.imgur.com/17s9eZS.gif" alt=""></img>
<img id='gif2' src="http://i.imgur.com/ZTndwX0.gif" alt=""></img>
<div id="rate"></div>
<div id="object"></div>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/AnimationFrame.js"></script>
<script src="http://aa8f47fcc01b7584f779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/FpsMeter.js"></script>
<script id="jsbin-javascript">
var c = document.getElementsByTagName('canvas')[0],
ctx = c.getContext('2d'),
canvas = document.createElement('canvas'),
ctx2 = canvas.getContext('2d'),
gif = document.getElementById('gif'),
gif2 = document.getElementById('gif2');
w = window.innerWidth;
h = window.innerHeight;
c.width = w;
c.height = h;
canvas.width = w;
canvas.height = h;
gif.addEventListener('load', function () {
animationFrame.request(animate);
});
gif2.addEventListener('load', function () {
animationFrame.request(animate);
});
document.addEventListener('mousemove', function (e) {
ctx2.globalCompositeOperation = 'source-over';
ctx2.beginPath();
ctx2.arc(e.pageX, e.pageY, 100, 0, Math.PI * 2, false);
ctx2.fill();
});
var animationFrame = new AnimationFrame(5);
var fpsMeter = new FpsMeter();
var animate = function() {
ctx.globalCompositeOperation = 'source-over';
ctx.clearRect(0, 0, w, h);
ctx2.globalCompositeOperation = 'source-atop';
ctx2.drawImage(gif, 0, 0, w, h);
ctx2.globalCompositeOperation = 'source-over';
ctx.drawImage(canvas, 0, 0, w, h);
ctx.globalCompositeOperation = 'source-atop';
fpsMeter.tick();
animationFrame.request(animate);
};
animate();
var rateElem = document.getElementById('rate');
fpsMeter.start(function(fps) {
rateElem.innerHTML = fps + ' FPS';
});
</script>
</body>
</html>
Raw
jsbin.lehiyo.css
canvas {
position:absolute;
top:0px;
left:0px;
}
img {
width:0px;
height:0px;
}
html {
background-color:#fffccc;
}
Raw
jsbin.lehiyo.js
var c = document.getElementsByTagName('canvas')[0],
ctx = c.getContext('2d'),
canvas = document.createElement('canvas'),
ctx2 = canvas.getContext('2d'),
gif = document.getElementById('gif'),
gif2 = document.getElementById('gif2');
w = window.innerWidth;
h = window.innerHeight;
c.width = w;
c.height = h;
canvas.width = w;
canvas.height = h;
gif.addEventListener('load', function () {
animationFrame.request(animate);
});
gif2.addEventListener('load', function () {
animationFrame.request(animate);
});
document.addEventListener('mousemove', function (e) {
ctx2.globalCompositeOperation = 'source-over';
ctx2.beginPath();
ctx2.arc(e.pageX, e.pageY, 100, 0, Math.PI * 2, false);
ctx2.fill();
});
var animationFrame = new AnimationFrame(5);
var fpsMeter = new FpsMeter();
var animate = function() {
ctx.globalCompositeOperation = 'source-over';
ctx.clearRect(0, 0, w, h);
ctx2.globalCompositeOperation = 'source-atop';
ctx2.drawImage(gif, 0, 0, w, h);
ctx2.globalCompositeOperation = 'source-over';
ctx.drawImage(canvas, 0, 0, w, h);
ctx.globalCompositeOperation = 'source-atop';
fpsMeter.tick();
animationFrame.request(animate);
};
animate();
var rateElem = document.getElementById('rate');
fpsMeter.start(function(fps) {
rateElem.innerHTML = fps + ' FPS';
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment