homm/canvas.html

## canvas.html
<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

  <canvas id="c"></canvas>

  <style type="text/css">
    #c {
      position: fixed;
    }
  </style>

  <script type="text/javascript">
    var data = [835382914336,815106278176,815113915009,835221047787,813132457504,815789853268,805321769227,814568379680,833943685611,833971209812,834261490370,835107042027,817178147224,815096984608,813472479776,834180103403,815731887444,814760048416,816048873300,815928308418,815095739168,812018612355,834777598804,812135541633,815555567648,816349055166,835384237856,815342757664,816383333310,812973315713,814920427808,834006065346,834869627115,834939914827,833986192363,814769821728,816196527648,835444986912,817184573931,815848810580,834880209048,816196712736,814930825601,813021140000,812855397408,813066758529,816196743200,835281963040,814286518560,815744032194,813741707393,815737820610,835280192800,833797251412,817045284180,833961926228,834122834840,812221940353,815342972448,815324397506,815765020312,816721467544,813131564673,834924157216,834857452884,815263946016,815553984800,816834784958,815337028030,816523439810,812230357121,834003831742,816521295444,805711814531,812414352257,814675702304,817155625963,814762371360,814064132225,834201350740,812749842305,835108127422,812774029441,815719392450,815766952600,814825855361,817330978795,815578567764,816196596768,835418581588,816513823934,816159153048,812016302723,812903300993,816777949419,815098570272,817160639316,835412994644,813065347969,816196682016,816196824608,835106951403,812861258528,834010238402,814342926112,814725819168,834286833537,812901232001,835313501825,816525975840,835281891616,815260153632,815342639648,833799122976,816187973570,835279630368,835443014731,815299381536,835480012064,812456363905,812160475265,811825870211,812861526048,834356364226,815556410144,813122572576,833773778667,814929024544,816574236610,815371475270,816584455106,833989457602,814825381249,815088319105,813155399200,805321606155,816196465184,816941042411,834351659970,835013973835,815354893758,833791685310,815871874498,812769977217,834158771134,835002192024,834408758936,816055311384,816650831956,835386731552,834796537675,834795571275,835471328032,835384077088,815493030432,815125389953,816962879467,814770244128,835122781771,812095670401,814872471230,815516630722,834554055362,834199965268,812311836033,815354177986,813432032800,815555762208,811809729667,816171863742,834392783956,813198496288,814280597536,835280273440,816229622974,812573989251,816387032002,814570512160,835279508512,815556262944,815340561184,815298813984,816530551230,812973257601,815093148033,815299142688,812687302273,814388603936,816186028226,816495987284,812770089345,815584954400,834200963668,815509804990,816156773611,815767207320,813270586497,813440693024,812018655107,833831038142,815960654270,834173419202,815524168992,815170777985,812222711681,833793703362,814968191264,835075680664,833948180203,816472999252,815382852128,816138507604,812221849217,835313208705,812459166337,815546500802,805321788171,816148254872,815528383776,816005148568,834846836811,833824404203,813119805216,834231093739,834361512856,834391122411,814671172993,812414365825,835508055448,815146841985,812886271105,816337463746,812621136416,815584907296,834361681304,817087768660,817165963604,813155237408,812621733408,834286149826,812016282243,812160497281,835442898720,816770856386,812576690563,816889636948,835224049387,816753476587,835280055328,835134975572,816567450347,816915739476,815114577793,835009464139,816885899755,814825714305,815143669377,813310728833,835282183456,815096040736,816145201131,815584423200,816045435168,834845989451,814930674817,812018670979,816172279380,816382758594,816878601556,816695081410,816298748312,835498960416,817078264148,816669655704,813473619232,813086143617,815744068034,814321160736,834035182827,815462919362,835158846795,815241968160,816196631072,815534302752,817108484180,812072140673,814321509664,835405529632,815123942785,813182287904,834797841560,815110337056,834796791627,835108295358,834188261016,815334374788,812855199264,834858081620,816196382752,834857766228,815555394592,813472808992,814920576288,816539781272,816500850411,805696917635,813131680129,835383525664,815707763796,815600732610,814678136864,835383799328,833838255042,815352565438,814670350112,816159194859,816357203390,812456828801,815743462770,815442965186,834157598142,813310920833,812857456672,834973844820,834025239787,815559433150,816549659842,812764839200,811967043457,816270652907,815744652064,816050711275,815244554784,817005368555,835440936736,816171795390,814380959520,815352979902,835470988832,814278170912,835147521867,834415155284,833999434686,816847817662,812460603777,812459308673,833777103294,816048405076,833961160898,816196795936,812971419009,816751088024,813126452000,834955718987,815095799072,812414840193,814770089504,814670462240,815741329858,835472996128,815113736833];

    var cols = 8;
    var rows = 6;
    var tile = 128;
    var fps = 24;
    var nextFrame = window.requestAnimationFrame;
    // var nextFrame = function(fn) { setTimeout(fn, 0); };
    var canvas = document.getElementById('c');
    var ctx = canvas.getContext('2d');
    var body = document.getElementsByTagName('body')[0];

    canvas.width = cols * tile;
    canvas.height = rows * tile;
    body.style.height = '' + (Math.ceil(data.length / cols) * 128) + 'px';

    data.map(function(name, index, data) {
      var i = new Image();
      i.onload = function() {
        var c = document.createElement('canvas');
        var ctx = c.getContext('2d');
        c.width = i.width;
        c.height = i.height;
        ctx.drawImage(i, 0, 0);
        // Enable this for preload in Safari.
        // ctx.getImageData(0, 0, 1, 1);

        c._loaded = true;
        c._cols = Math.floor(i.width / tile);
        c._rows = Math.floor(i.height / tile);
        c._frames = c._cols * c._rows;

        data[index] = c;
      };
      i.src = './vertical-60fps/' + name + '.png';
      return i;
    });

    var startTime = new Date();
    var prevFrame = null;
    var prevOffset = null;

    function draw() {
      var col, row, offsetRow;
      var frame = Math.floor(((new Date()) - startTime) / 1000 * fps);
      var offset = body.scrollTop || document.documentElement.scrollTop;
      if (offset < 0) {
        offset = 0;
      }
      if (frame != prevFrame || offset != prevOffset) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        offsetRow = Math.floor(offset / tile);
        for (row = 0; row < rows + 1; row += 1) {
          for (col = 0; col < cols; col += 1) {
            var iframe;
            var i = data[(row + offsetRow) * cols + col];
            if ( ! i || ! i._loaded) {
              continue;
            }
            iframe = frame % i._frames;
            ctx.drawImage(i,
              (iframe % i._cols) * tile, Math.floor(iframe / i._cols) * tile, tile, tile,
              col * tile, row * tile - (offset % tile), tile, tile);
          }
        }
      }
      prevOffset = offset;
      prevFrame = frame;
      nextFrame(draw);
    }
    nextFrame(draw);
  </script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	</head>
	<body>

	<canvas id="c"></canvas>

	<style type="text/css">
	#c {
	position: fixed;
	}
	</style>

	<script type="text/javascript">
	var data = [835382914336,815106278176,815113915009,835221047787,813132457504,815789853268,805321769227,814568379680,833943685611,833971209812,834261490370,835107042027,817178147224,815096984608,813472479776,834180103403,815731887444,814760048416,816048873300,815928308418,815095739168,812018612355,834777598804,812135541633,815555567648,816349055166,835384237856,815342757664,816383333310,812973315713,814920427808,834006065346,834869627115,834939914827,833986192363,814769821728,816196527648,835444986912,817184573931,815848810580,834880209048,816196712736,814930825601,813021140000,812855397408,813066758529,816196743200,835281963040,814286518560,815744032194,813741707393,815737820610,835280192800,833797251412,817045284180,833961926228,834122834840,812221940353,815342972448,815324397506,815765020312,816721467544,813131564673,834924157216,834857452884,815263946016,815553984800,816834784958,815337028030,816523439810,812230357121,834003831742,816521295444,805711814531,812414352257,814675702304,817155625963,814762371360,814064132225,834201350740,812749842305,835108127422,812774029441,815719392450,815766952600,814825855361,817330978795,815578567764,816196596768,835418581588,816513823934,816159153048,812016302723,812903300993,816777949419,815098570272,817160639316,835412994644,813065347969,816196682016,816196824608,835106951403,812861258528,834010238402,814342926112,814725819168,834286833537,812901232001,835313501825,816525975840,835281891616,815260153632,815342639648,833799122976,816187973570,835279630368,835443014731,815299381536,835480012064,812456363905,812160475265,811825870211,812861526048,834356364226,815556410144,813122572576,833773778667,814929024544,816574236610,815371475270,816584455106,833989457602,814825381249,815088319105,813155399200,805321606155,816196465184,816941042411,834351659970,835013973835,815354893758,833791685310,815871874498,812769977217,834158771134,835002192024,834408758936,816055311384,816650831956,835386731552,834796537675,834795571275,835471328032,835384077088,815493030432,815125389953,816962879467,814770244128,835122781771,812095670401,814872471230,815516630722,834554055362,834199965268,812311836033,815354177986,813432032800,815555762208,811809729667,816171863742,834392783956,813198496288,814280597536,835280273440,816229622974,812573989251,816387032002,814570512160,835279508512,815556262944,815340561184,815298813984,816530551230,812973257601,815093148033,815299142688,812687302273,814388603936,816186028226,816495987284,812770089345,815584954400,834200963668,815509804990,816156773611,815767207320,813270586497,813440693024,812018655107,833831038142,815960654270,834173419202,815524168992,815170777985,812222711681,833793703362,814968191264,835075680664,833948180203,816472999252,815382852128,816138507604,812221849217,835313208705,812459166337,815546500802,805321788171,816148254872,815528383776,816005148568,834846836811,833824404203,813119805216,834231093739,834361512856,834391122411,814671172993,812414365825,835508055448,815146841985,812886271105,816337463746,812621136416,815584907296,834361681304,817087768660,817165963604,813155237408,812621733408,834286149826,812016282243,812160497281,835442898720,816770856386,812576690563,816889636948,835224049387,816753476587,835280055328,835134975572,816567450347,816915739476,815114577793,835009464139,816885899755,814825714305,815143669377,813310728833,835282183456,815096040736,816145201131,815584423200,816045435168,834845989451,814930674817,812018670979,816172279380,816382758594,816878601556,816695081410,816298748312,835498960416,817078264148,816669655704,813473619232,813086143617,815744068034,814321160736,834035182827,815462919362,835158846795,815241968160,816196631072,815534302752,817108484180,812072140673,814321509664,835405529632,815123942785,813182287904,834797841560,815110337056,834796791627,835108295358,834188261016,815334374788,812855199264,834858081620,816196382752,834857766228,815555394592,813472808992,814920576288,816539781272,816500850411,805696917635,813131680129,835383525664,815707763796,815600732610,814678136864,835383799328,833838255042,815352565438,814670350112,816159194859,816357203390,812456828801,815743462770,815442965186,834157598142,813310920833,812857456672,834973844820,834025239787,815559433150,816549659842,812764839200,811967043457,816270652907,815744652064,816050711275,815244554784,817005368555,835440936736,816171795390,814380959520,815352979902,835470988832,814278170912,835147521867,834415155284,833999434686,816847817662,812460603777,812459308673,833777103294,816048405076,833961160898,816196795936,812971419009,816751088024,813126452000,834955718987,815095799072,812414840193,814770089504,814670462240,815741329858,835472996128,815113736833];

	var cols = 8;
	var rows = 6;
	var tile = 128;
	var fps = 24;
	var nextFrame = window.requestAnimationFrame;
	// var nextFrame = function(fn) { setTimeout(fn, 0); };
	var canvas = document.getElementById('c');
	var ctx = canvas.getContext('2d');
	var body = document.getElementsByTagName('body')[0];

	canvas.width = cols * tile;
	canvas.height = rows * tile;
	body.style.height = '' + (Math.ceil(data.length / cols) * 128) + 'px';

	data.map(function(name, index, data) {
	var i = new Image();
	i.onload = function() {
	var c = document.createElement('canvas');
	var ctx = c.getContext('2d');
	c.width = i.width;
	c.height = i.height;
	ctx.drawImage(i, 0, 0);
	// Enable this for preload in Safari.
	// ctx.getImageData(0, 0, 1, 1);

	c._loaded = true;
	c._cols = Math.floor(i.width / tile);
	c._rows = Math.floor(i.height / tile);
	c._frames = c._cols * c._rows;

	data[index] = c;
	};
	i.src = './vertical-60fps/' + name + '.png';
	return i;
	});

	var startTime = new Date();
	var prevFrame = null;
	var prevOffset = null;

	function draw() {
	var col, row, offsetRow;
	var frame = Math.floor(((new Date()) - startTime) / 1000 * fps);
	var offset = body.scrollTop \|\| document.documentElement.scrollTop;
	if (offset < 0) {
	offset = 0;
	}
	if (frame != prevFrame \|\| offset != prevOffset) {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	offsetRow = Math.floor(offset / tile);
	for (row = 0; row < rows + 1; row += 1) {
	for (col = 0; col < cols; col += 1) {
	var iframe;
	var i = data[(row + offsetRow) * cols + col];
	if ( ! i \|\| ! i._loaded) {
	continue;
	}
	iframe = frame % i._frames;
	ctx.drawImage(i,
	(iframe % i._cols) * tile, Math.floor(iframe / i._cols) * tile, tile, tile,
	col * tile, row * tile - (offset % tile), tile, tile);
	}
	}
	}
	prevOffset = offset;
	prevFrame = frame;
	nextFrame(draw);
	}
	nextFrame(draw);
	</script>

	</body>
	</html>