Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
function xmas() {
var b = document.getElementsByTagName('body')[0];
var c = document.createElement('canvas');
var ctx = c.getContext('2d');
var flakes, flakeNumber = 250, gravity = 1, w, h, timer;
c.style.cursor = 'pointer';
c.style.zIndex = '999999';
c.style.top = 0;
c.style.left = 0;
c.style.position = 'absolute';
b.appendChild(c);
c.onclick = function() {
c.parentNode.removeChild(c);
};
window.onresize = function() {
window.clearTimeout(timer);
init();
};
function init() {
w = window.innerWidth - 20;
h = window.innerHeight - 20;
c.setAttribute('width', w);
c.setAttribute('height', h);
flakes = [];
for(var i=0; i<flakeNumber; i++) {
flakes.push({
x: Math.random() * w,
y: ((Math.random() * h) - gravity)
});
}
animate();
}
function drawFlake(x, y) {
ctx.fillStyle = '#ffffff';
ctx.beginPath();
ctx.arc(x, y, 5, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
function drawSanta(x, y) {
ctx.fillStyle = "white";
ctx.strokeStyle = "black";
ctx.globalAlpha = "1.0";
ctx.lineWidth = "1";
ctx.lineCap = "butt";
ctx.lineJoin = "round";
ctx.mitterLimit = "1";
ctx.font = "normal normal 12 Courier";
ctx.fillStyle = "#cf7122";
ctx.beginPath();
ctx.moveTo(190.50 + x, 110 + y);
ctx.bezierCurveTo(212.76 + x, 137.04 + y, 228.70 + x, 183.28 + y, 201 + x, 214.50 + y);
ctx.bezierCurveTo(177.76 + x, 240.70 + y, 137.26 + x, 243.54 + y, 115 + x, 216.50 + y);
ctx.bezierCurveTo(92.74 + x, 189.46 + y, 95.24 + x, 144.54 + y, 117.50 + x, 117.50 + y);
ctx.bezierCurveTo(139.76 + x, 90.46 + y, 168.24 + x, 82.96 + y, 190.50 + x, 110 + y);
ctx.closePath();
ctx.fill();
ctx.fillStyle = "white";
ctx.strokeStyle = "black";
ctx.fillStyle = "#dd381b";
ctx.beginPath();
ctx.moveTo(164 + x, 125 + y);
ctx.bezierCurveTo(189.77 + x, 161.32 + y, 206.77 + x, 222.68 + y, 181 + x, 259 + y);
ctx.bezierCurveTo(155.23 + x, 295.32 + y, 77.77 + x, 296.32 + y, 52 + x, 260 + y);
ctx.bezierCurveTo(26.23 + x, 223.68 + y, 36.21 + x, 158.10 + y, 66 + x, 125 + y);
ctx.bezierCurveTo(93 + x, 95 + y, 138.23 + x, 88.68 + y, 164 + x, 125 + y);
ctx.closePath();
ctx.fill();
ctx.fillStyle = "#f8d5a1";
ctx.beginPath();
ctx.moveTo(48 + x, 169.50 + y);
ctx.bezierCurveTo(52.06 + x, 174.75 + y, 44.75 + x, 178 + y, 45.82 + x, 190.33 + y);
ctx.bezierCurveTo(46.70 + x, 200.46 + y, 38.15 + x, 193.63 + y, 33.92 + x, 188.06 + y);
ctx.bezierCurveTo(29.69 + x, 182.48 + y, 29.69 + x, 173.45 + y, 33.92 + x, 167.88 + y);
ctx.bezierCurveTo(38.15 + x, 162.30 + y, 43.94 + x, 164.25 + y, 48 + x, 169.50 + y);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(184.25 + x, 209 + y);
ctx.bezierCurveTo(179.33 + x, 204.25 + y, 187.98 + x, 205.19 + y, 186.25 + x, 190.50 + y);
ctx.bezierCurveTo(184.87 + x, 178.73 + y, 189.51 + x, 181.16 + y, 193.03 + x, 186.04 + y);
ctx.bezierCurveTo(196.56 + x, 190.93 + y, 197.10 + x, 199.29 + y, 194.24 + x, 204.71 + y);
ctx.bezierCurveTo(191.38 + x, 210.14 + y, 189.17 + x, 213.75 + y, 184.25 + x, 209 + y);
ctx.closePath();
ctx.fill();
ctx.fillStyle = "white";
ctx.strokeStyle = "black";
ctx.fillStyle = "#ffd5a2";
ctx.beginPath();
ctx.moveTo(142.82 + x, 38.47 + y);
ctx.bezierCurveTo(160.39 + x, 56.44 + y, 160.39 + x, 85.56 + y, 142.82 + x, 103.53 + y);
ctx.bezierCurveTo(125.25 + x, 121.49 + y, 96.75 + x, 121.49 + y, 79.18 + x, 103.53 + y);
ctx.bezierCurveTo(61.61 + x, 85.56 + y, 61.61 + x, 56.44 + y, 79.18 + x, 38.47 + y);
ctx.bezierCurveTo(96.75 + x, 20.51 + y, 125.25 + x, 20.51 + y, 142.82 + x, 38.47 + y);
ctx.closePath();
ctx.fill();
ctx.fillStyle = "white";
ctx.strokeStyle = "black";
ctx.strokeStyle = "#000000";
ctx.lineWidth = "1.000000";
ctx.lineJoin = "miter";
ctx.beginPath();
ctx.moveTo(-122 + x, -146 + y);
ctx.bezierCurveTo( - 122 + x, -146 + y, -122 + x, -146 + y, -122 + x, -146 + y);
ctx.bezierCurveTo( - 122 + x, -146 + y, -122 + x, -146 + y, -122 + x, -146 + y);
ctx.bezierCurveTo( - 122 + x, -146 + y, -122 + x, -146 + y, -122 + x, -146 + y);
ctx.bezierCurveTo( - 122 + x, -146 + y, -122 + x, -146 + y, -122 + x, -146 + y);
ctx.closePath();
ctx.stroke();
ctx.fillStyle = "#4f4f4f";
ctx.lineWidth = "1";
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(100.03 + x, 54.81 + y);
ctx.bezierCurveTo(101.59 + x, 56.42 + y, 101.59 + x, 59.03 + y, 100.03 + x, 60.64 + y);
ctx.bezierCurveTo(98.47 + x, 62.25 + y, 95.93 + x, 62.25 + y, 94.37 + x, 60.64 + y);
ctx.bezierCurveTo(92.81 + x, 59.03 + y, 92.81 + x, 56.42 + y, 94.37 + x, 54.81 + y);
ctx.bezierCurveTo(95.93 + x, 53.20 + y, 98.47 + x, 53.20 + y, 100.03 + x, 54.81 + y);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(128.83 + x, 54.81 + y);
ctx.bezierCurveTo(130.39 + x, 56.42 + y, 130.39 + x, 59.03 + y, 128.83 + x, 60.64 + y);
ctx.bezierCurveTo(127.27 + x, 62.25 + y, 124.73 + x, 62.25 + y, 123.17 + x, 60.64 + y);
ctx.bezierCurveTo(121.61 + x, 59.03 + y, 121.61 + x, 56.42 + y, 123.17 + x, 54.81 + y);
ctx.bezierCurveTo(124.73 + x, 53.20 + y, 127.27 + x, 53.20 + y, 128.83 + x, 54.81 + y);
ctx.closePath();
ctx.fill();
ctx.fillStyle = "#ffffff";
ctx.beginPath();
ctx.moveTo(135.06 + x, 89.53 + y);
ctx.bezierCurveTo(142.85 + x, 107.86 + y, 130.06 + x, 138.27 + y, 123.51 + x, 157.06 + y);
ctx.bezierCurveTo(110.97 + x, 192.98 + y, 111.61 + x, 192.98 + y, 95.27 + x, 157.06 + y);
ctx.bezierCurveTo(87.02 + x, 138.91 + y, 77.83 + x, 108.48 + y, 85.62 + x, 90.14 + y);
ctx.bezierCurveTo(93.42 + x, 71.81 + y, 127.26 + x, 71.19 + y, 135.06 + x, 89.53 + y);
ctx.closePath();
ctx.fill();
ctx.fillStyle = "#4f4f4f";
ctx.beginPath();
ctx.moveTo(117.93 + x, 97.68 + y);
ctx.bezierCurveTo(122.03 + x, 95.92 + y, 122.03 + x, 93.08 + y, 117.93 + x, 91.32 + y);
ctx.bezierCurveTo(113.82 + x, 89.56 + y, 107.18 + x, 89.56 + y, 103.07 + x, 91.32 + y);
ctx.bezierCurveTo(98.97 + x, 93.08 + y, 98.97 + x, 95.92 + y, 103.07 + x, 97.68 + y);
ctx.bezierCurveTo(107.18 + x, 99.44 + y, 113.82 + x, 99.44 + y, 117.93 + x, 97.68 + y);
ctx.closePath();
ctx.fill();
ctx.fillStyle = "white";
ctx.strokeStyle = "black";
ctx.fillStyle = "#dc381b";
ctx.beginPath();
ctx.moveTo(127.25 + x, 12.09 + y);
ctx.bezierCurveTo(146.48 + x, 27.35 + y, 158.99 + x, 59.74 + y, 147 + x, 52.50 + y);
ctx.bezierCurveTo(123 + x, 38 + y, 92 + x, 40 + y, 72.50 + x, 54.50 + y);
ctx.bezierCurveTo(65.64 + x, 59.60 + y, 77 + x, 29.50 + y, 89.50 + x, 16 + y);
ctx.bezierCurveTo(103.44 + x, 0.94 + y, 109.50 + x, -2 + y, 127.25 + x, 12.09 + y);
ctx.closePath();
ctx.fill();
}
function animate() {
ctx.clearRect(0, 0, w, h);
drawSanta((w/2) - 120, (h/2) - 150);
for(var i in flakes) {
var f = flakes[i];
f.y += gravity;
if(f.y > h) {
f.y = -10;
f.x = Math.random() * w;
}
drawFlake(f.x, f.y);
}
timer = window.setTimeout(animate, 20);
}
init();
return false;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment