when will mousemove event fire

by JoeZheng

HTML

<canvas class="canvas"></canvas>

JavaScript

const $canvas = $('.canvas')
const ctx = $canvas.getContext('2d')
const width = window.innerWidth
const height = window.innerHeight
const ratio = window.devicePixelRatio || 1
$canvas.width = width * ratio
$canvas.height = height * ratio
ctx.scale(ratio, ratio)
$canvas.style.cssText = `width:${width}px;height:${height}px`
let flag = false
let timeStamps = []

$canvas.addEventListener('mousedown', e => {
    flag = true
    timeStamps = []
})
$canvas.addEventListener('mousemove', e => {
    if (!flag) { return }

    timeStamps.push(e.timeStamp)

    draw(e.clientX, e.clientY)
}, false)

$canvas.addEventListener('mouseup', e => {
    if (!flag) { return }
    flag = false

    console.log('timeStamps:', timeStamps)
    console.log('timeStamps offsets:', getOffsets(timeStamps))
}, false)

function $(el) {
    return document.querySelector(el)
}
function getOffsets(list) {
    return list.map((item, i) => {
        return i - 1 >= 0 ?
            item - list[i - 1] :
            item
    })
}
function draw(x, y) {
    ctx.fillRect(x, y, 2, 2)
}