Нужно при наведении на соответствующий квадрат отобразить название цвета в рамке (аналог атрибута title в HTML).
Ниже привел код который пока удалось создать:
var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(15, 15, 20, 20);
ctx.fillStyle = "blue";
ctx.fillRect(45, 15, 20, 20);
ctx.fillStyle = "green";
ctx.fillRect(75, 15, 20, 20);
document.getElementById('canvas').addEventListener('mousemove', e=>{
x = e.offsetX; // получаем позицию мыши по координате x
y = e.offsetY; // получаем позицию мыши по координате y
ctx.fillStyle = "#333";
ctx.font = "bold 16px Arial";
ctx.fillText("Красный", 20, 45);
ctx.fillText("Синий", 50, 45);
ctx.fillText("Зеленый", 80, 45);
});
#canvas {
border: 1px solid #999;
}
<canvas id="canvas" width="110" height="50"></canvas>