code: function Log(keyboardInfo) {
      var log = keyboardInfo.querySelector('ul')
      var st = keyboardInfo.querySelector('.statistic')
      var totalAvgTime = 0
      var totalCount = 0
      return function (key, statistic) {
        var count = statistic.count
        var average = statistic.average
        totalCount = totalCount + 1
        totalAvgTime = totalAvgTime + statistic.average
        totalAvg = +(totalAvgTime/totalCount).toFixed(2) || 0
  
        var li = document.createElement('li')
        li.className = "bounceIn animated"
        li.innerHTML = '<kbd>'+key+'</kbd><div><p><span class="avg">avg: </span><span class="value">'+average.toFixed(2)+'</span>ms</p><p><span class="count">count: </span><span class="value">'+count+'</span></p></div>'
        log.insertBefore(li, log.firstChild) // http://callmenick.com/post/prepend-child-javascript
        if (log.children.length > 10) {
          log.lastChild.remove()
        }
        st.innerHTML = '<div><span class="avg">Total Avg: </span><span class="value">'+totalAvg+' ms</span></div><div><span class="count">Total Count: </span><span class="value">'+totalCount+'</span></div>'
      }
    }
docs: canvas.style.zIndex = 10