samples/heatmap.js
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>'
    }
  }
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>'
    }
  }
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>' } }
canvas.style.zIndex = 10
canvas . style . zIndex = 10