Fix icon and clear image context in case multiple images are uploaded

index.html

@@ -10,7 +10,7 @@
 			rel="stylesheet"
 			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
 		/>
-		<link rel="icon" href="./demo.png" />
+		<link rel="icon" href="./images/demo_squid.png" />
 	</head>
 
 	<title>QRImage</title>
@@ -172,7 +172,12 @@
 			</div>
 
 			<div class="center">
-				<p>*Note that these QR codes may not work with every QR code reader, so be sure to test them first.  If you are having trouble getting them to read, you may want to increase the bit size.</p>
+				<p>
+					*Note that these QR codes may not work with every QR code
+					reader, so be sure to test them first. If you are having
+					trouble getting them to read, you may want to increase the
+					bit size.
+				</p>
 			</div>
 
 			<br />

index.js

@@ -7,8 +7,11 @@ imageLoader.addEventListener("change", handleImage, false);
 var uploadCanvas = document.getElementById("imageCanvas");
 var uploadContext = uploadCanvas.getContext("2d");
 
-uploadCanvas.width = 200;
-uploadCanvas.height = 200;
+uploadWidth = 200;
+uploadHeight = 200;
+
+uploadCanvas.width = uploadWidth;
+uploadCanvas.height = uploadHeight;
 
 img = false;
 
@@ -17,7 +20,8 @@ function handleImage(e) {
   reader.onload = function (event) {
     img = new Image();
     img.onload = function () {
-      uploadContext.drawImage(img, 0, 0, 200, 200);
+      uploadContext.clearRect(0, 0, uploadWidth, uploadHeight);
+      uploadContext.drawImage(img, 0, 0, uploadWidth, uploadHeight);
     };
     img.src = event.target.result;
   };
@@ -235,8 +239,8 @@ function makeCode() {
       }
       drawShape(
         ctx,
-        i + borderSizeValue,
         j + borderSizeValue,
+        i + borderSizeValue,
         bitLength,
         radiusRatio,
         QRLength