stop button, loop skipped a frame

index.html

@@ -54,13 +54,16 @@
           <div class="form-field">
             <input type="button" name="start" id="start" value="start"/>
           </div>
+          <div class="form-field">
+            <input type="button" name="stop" id="stop" value="stop"/>
+          </div>
           <div class="form-field">
             <input type="button" name="reset" id="reset" value="reset"/>
           </div>
         </form>
       </div>
       <div class="menu-row">
-        <form method="">
+        <form>
           <div class="form-field">
             <label for="live">Living cell color</label>
             <input name="live" type="color" id="live" value="#000000"/>

main.js

@@ -8,11 +8,12 @@ const dead = document.querySelector('#dead');
 const live = document.querySelector('#live');
 const startBtn = document.querySelector('#start');
 const resetBtn = document.querySelector('#reset');
+const stopBtn = document.querySelector('#stop');
 const cellSize = document.querySelector('#cellSize');
 const loop = document.querySelector('#loop');
 
-canvas.width = main.offsetWidth;
-canvas.height = main.offsetHeight;
+canvas.width = main.offsetWidth * 0.9;
+canvas.height = main.offsetHeight * 0.9;
 
 // TODO: Hide iterator inside
 function evolve(state, acc, rules) {
@@ -89,7 +90,7 @@ async function draw(state, acc) {
   await sleep(40);
 
   const newAcc = () => {
-    if (position >= canvas.height && loop.checked) return 1;
+    if (position >= canvas.height && loop.checked) return 0;
     return acc;
   };
 
@@ -118,3 +119,7 @@ startBtn.addEventListener('click', async () => {
 resetBtn.addEventListener('click', async () => {
   reset();
 });
+
+stopBtn.addEventListener('click', async () => {
+  drawing = 0;
+});

style.css

@@ -10,6 +10,11 @@ body {
     font-family: Courier New;
 }
 
+canvas {
+    background: #110812;
+    margin: 20px 0 0 0;
+}
+
 h1 {
     font-size: large;
     font-weight: bold;
@@ -20,6 +25,12 @@ sidebar {
     padding: 10px;
 }
 
+input[type="button"] {
+    min-width: 60px;
+    padding: 5px;
+    font-weight: bold;
+}
+
 .form-field {
     display: flex;
     margin: 10px;