From eb579a9ea316d766125ae3e861c691e55e356689 Mon Sep 17 00:00:00 2001
From: Ralph Caraveo <deckarep@gmail.com>
Date: Mon, 15 Jun 2015 18:55:56 -0700
Subject: [PATCH] Fixing canvas blurry issue when scaled.

---
 html5/index.htm | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/html5/index.htm b/html5/index.htm
index 89248d9..ee1c257 100644
--- a/html5/index.htm
+++ b/html5/index.htm
@@ -6,6 +6,15 @@
 
 <style type="text/css">
 body  { background-color:#eeeeee; font-family:arial,sans-serif; width:80%; margin-left:auto; margin-right:auto; }
+/*This canvas magic makes it so it doesn't look blurry when scaled up*/
+canvas {
+  image-rendering: optimizeSpeed;             /* Older versions of FF          */
+  image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
+  image-rendering: -webkit-optimize-contrast; /* Safari                        */
+  image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
+  image-rendering: pixelated;                 /* Awesome future-browsers       */
+  -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
+}
 .header_box  { background-color:#007777; text-align:center; font-size:24px; font-weight:bold; padding:0.25em;
                white-space:nowrap; border-color:#111111; border-style:solid; border-width:1px; }
 .left_navigation           { height:100%; float:left; width:150px; background-color:#007777; text-align:center;
@@ -38,8 +47,8 @@ function toggle_2x_mode()
     var cnvs = document.getElementById("cdg_canvas");
     var audi = document.getElementById("cdg_audio");
 
-	// Works, you can change this number to 2 or 3 or whatever fits beyatch!
-	var scale_factor = 2;
+    // Works, you can change this number to 2 or 3 or whatever fits beyatch!
+    var scale_factor = 3;
 
     audi.style.width  = (zoom_mode) ? (324 * scale_factor) + "px" : 324 + "px";