remove horizontal scrollbars

scale down canvas if the image is wider than the browser window

index.html

@@ -40,7 +40,9 @@
 			<button id="save-button" class="button">export image</button>
 			<a id="png-button" download="glitched-image.png" target="_blank" class="download-link">download bitmap file<span> (.png)</span></a>
 		</div>
-		<canvas id="canvas"></canvas>
+		<div class="canvas-wrapper">
+			<canvas id="canvas" />
+		</div>
 		<script src="scripts/lib/require-2.1.4.js" data-main="scripts/main"></script>
 	</body>
 </html>

styles/main.css

@@ -122,14 +122,6 @@ a:hover
 	display: none;
 }
 
-#canvas
-{
-	clear: both;
-	float: left;
-	margin-top: 30px;
-	display: block;
-}
-
 .export-wrapper
 {
 	clear: both;
@@ -156,8 +148,21 @@ a:hover
 		margin-left: 4px;
 	}
 
-
 .missing-feature
 {
 	clear: both;
-}
+}
+
+.canvas-wrapper
+{
+	width: 100%;
+	clear: both;
+	float: left;
+	margin-top: 30px;
+
+}
+	#canvas
+	{
+		display: block;
+		max-width: 100%;
+	}