title: Merge Sort Visualisation
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// variables
  // arr has elements to be sorted
  var arr = []
  // temp is to store the intermediate results after merging
  var temp = []
  // seen is for marking visited i.e. sorted half as green
  var seen = []
  // length of array
  var len = 100
  
  // canvas initialisations
  var canvas = document.getElementById("myCanvas")
  canvas.width = canvas.height = 1000
  var canvaswidth = canvas.width
  var canvasheight = canvas.height
  var ctx = canvas.getContext("2d")
  
  // random array
  for (let i = 0; i &lt; len; i++) {
      arr.push(parseInt(Math.random() * 500))
      temp.push(parseInt(0))
      seen.push(parseInt(0))
  }
  
  // initial contents of array to be sorted
  // console.log(arr)
  
  // draw the bars
  draw = (s, e) =&gt; {
      ctx.clearRect(0, 0, 1000, 1000)
  
      // this loop will make unvisited bars in the upper half as black
      // and visited bars in the upper half as green
      for (let i = 0; i &lt; len; i++) {
          ctx.fillStyle = "#000000"
          ctx.fillRect(15 * i, 500 - arr[i], 10, arr[i])
          if (seen[i]) {
              ctx.fillStyle = "#00ff00"
              ctx.fillRect(15 * i, 500 - arr[i], 10, arr[i])
          }
      }
  
      // the part that was merged is made blue in the lower half
      // also its equivalent in the uper half is made white
      for (let i = s; i &lt;= e; i++) {
          ctx.fillStyle = "#ffffff"
          ctx.fillRect(15 * i, 500 - arr[i], 10, arr[i])
          ctx.fillStyle = "#0000ff"
          ctx.fillRect(15 * i, 500, 10, arr[i])
          seen[i] = 1
      }
  
  }
  
  // merge
  merge = (s, e) =&gt; {
  
      let m = parseInt((s + e) / 2)
      let p1 = s
      let p2 = m + 1
      let n1 = m
      let n2 = e
      let idx = s
  
      while (p1 &lt;= n1 &amp;&amp; p2 &lt;= n2) {
          if (arr[p1] &lt;= arr[p2]) {
              temp[idx++] = arr[p1++]
          }
          else {
              temp[idx++] = arr[p2++]
          }
      }
  
      while (p1 &lt;= n1) {
          temp[idx++] = arr[p1++]
      }
  
      while (p2 &lt;= n2) {
          temp[idx++] = arr[p2++]
      }
  
      idx = s
      while (idx &lt;= e) {
          arr[idx] = temp[idx++]
      }
  
  }
  
  // delay
  function mytimeout(ms) {
      return new Promise(resolve =&gt; setTimeout(resolve, ms));
  }
  
  // mergesort
  const mergesort = async (s, e) =&gt; {
  
      if (s &lt; e) {
          let m = parseInt((s + e) / 2)
          await mergesort(s, m)
          await mergesort(m + 1, e)
          await merge(s, e)
          // await console.log(`merged ${s} to ${e} now draw...`)
          await draw(s, e)
          await mytimeout(500)
      }
  
  }
  
  // calls merge sort and at last 
  // makes all bars become green in upper half
  const performer = async () =&gt; {
      await mergesort(0, len - 1)
      // await console.log(arr)
      await draw()
  }
  
  
  
  performer()</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;canvas id="myCanvas"&gt;
          Your browser does not support the canvas element.
      &lt;/canvas&gt;
      &lt;script src="testmerge.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I am trying to make a visualisation of <strong>merge sort</strong> using plain javascript with HTML canvas.</p>
  <p>If i change the len variable to 50 or below my code works</p>
  <p>currently i have kept the len variable at 100</p>
  <p>the entire array after getting sorted, in the final picture, the bars in the histogram decrease in height automatically</p>
  <p>i am not sure if there is a better/cleaner way to approach this</p>