JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<canvas id="c" width="500" height="500"></canvas>
<canvas id="o" width="500" height="500"></canvas>

CSS

canvas {position: absolute}

JavaScript

var c = document.getElementById('c').getContext('2d'),
    o = document.getElementById('o').getContext('2d'),
    edge = 20,
    PEEOVERVI = 0.5235987755982988,
    height = edge * Math.sin(PEEOVERVI),
    radius = edge * Math.cos(PEEOVERVI),
    rw = 2 * radius,
    rh = 2 * height + edge

c.translate(0.5, 0.5)
o.translate(0.5, 0.5)

c.beginPath()
board(c, 10, 10)
c.strokeStyle = '#0080ff'
c.stroke()

o.canvas.addEventListener('mousemove', mousemove)

function board(c, w, h) {
    for (var i = 0; i < w; ++i)
        for (var j = 0; j < h; ++j)
            hex(c, i * rw + ((j & 1) * radius), j * (edge + height))
}

function hex(c, u, v) {
    c.moveTo(u + radius, v)
    c.lineTo(u + rw, v + height)
    c.lineTo(u + rw, v + height + edge)
    c.lineTo(u + radius, v + rh)
    c.lineTo(u, v + edge + height)
    c.lineTo(u, v + height)
    c.lineTo(u + radius, v)
}

function mousemove(event) {
    var rect = o.canvas.getBoundingClientRect(),
        x = event.clientX - rect.left,
        y = event.clientY - rect.top

    y = 0 | y / (edge + height)
    x = 0 | (x - (y & 1) * radius) / rw

    if (x > -1 && x < 10 && y > -1 && y < 10) {
        o.beginPath()
        hex(o, x * rw + ((y & 1) * radius), y * (edge + height))
        o.clearRect(0, 0, 500, 500)
        o.fillStyle = '#0080ff'
        o.fill()
    }
}