<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>snej</title> <style> * { padding: 0; margin: 0; } body { background: black; color: white; font-family: monospace; } div { text-align: center; } canvas { background: magenta; display: block; margin: 0 auto; margin-top: 8px; margin-bottom: 8px; padding: 1px; image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: -moz-crisp-edges; } </style> </head> <body> <!-- The canvas drawing resolution is the SNES resolution: 256x224. JavaScript upscales the canvas (hopefully in a way that the browser doesn't antialias it.) --> <canvas id="canvas" width="256" height="224" style="display: none"></canvas> <div id="fps"></div> <div id="debug"></div> <button id="1x">1x</button> <button id="2x">2x</button> <button id="3x">3x</button> <button id="4x">4x</button> <button id="5x">5x</button> <button id="6x">6x</button> <button id="7x">7x</button> <button id="8x">8x</button> <img src="res/tf/atlantis/tf_atlantis_tiles.png" id="atlantis" style="display: none"> <img src="res/tf/halloween/ghost1.png" id="ghost" style="display: none"> <img src="res/tf/beasttribes/beast_tribe_2.png" id="cats" style="display: none"> <script src="main.js"></script> </body> </html>