Canvas hover

by joeycakes

HTML

<div id="container">
  <canvas width="400" height="400" id="background"></canvas>
</div>

<pre id="debug"></pre>

CSS

#container {
  width: 400px;
  height: 400px;
  border: 1px solid black;
}

JavaScript

var canvas = document.getElementById('background');
var context = canvas.getContext('2d');
var tilesize = 50;
var primary = '#ffffff';
var secondary = '#808080';
var primaryHover = '#808080';
var secondaryHover = '#4d4d4d';
var primaryActive = '#009900';
var secondaryActive = '#004d00';
var active = {};
var prevHover = {};

// Render board
function renderTiles () {
  for (var x = 0; x < 8; x++) {
    for (var y = 0; y < 8; y++) {
      renderTile(x, y);
    }
  }
}

// Render tile
function renderTile (x, y) {
  var color = (x + y) % 2 ? secondary : primary;
  context.save();
  context.fillStyle = color;
  context.translate(x * tilesize, y * tilesize);
  context.fillRect(0, 0, tilesize, tilesize);
  context.restore();
}

// Render hover
function renderTileHover (x, y) {
	var color = (x + y) % 2 ? secondaryHover : primaryHover;
  context.save();
  context.setLineDash([5, 5]);
  context.strokeStyle = color;
  context.translate(x * tilesize, y * tilesize);
  context.strokeRect(5, 5, tilesize - 10, tilesize - 10);
  context.restore();
}

// Render active
function renderTileActive (x, y) {
	var color = (x + y) % 2 ? secondaryActive : primaryActive;
  context.save();
  context.setLineDash([5, 5]);
  context.strokeStyle = color;
  context.translate(x * tilesize, y * tilesize);
  context.strokeRect(5, 5, tilesize - 10, tilesize - 10);
  context.restore();
}

function isActive (x, y) {
	return x === active.x && y === active.y;
}

function isPrevHover (x, y) {
	return x === prevHover.x && y === prevHover.y;
}

// Mouse move event
function mousemove (e) {
  var pos = this.getBoundingClientRect();
  var mouseX = e.clientX - pos.left;
  var mouseY = e.clientY - pos.top;
  var x = Math.floor(mouseX / tilesize);
  var y = Math.floor(mouseY / tilesize);
  if (isPrevHover(x, y) || isActive(x, y)) {
  	return;
  }
  renderTileHover(x, y);
  renderTile(prevHover.x, prevHover.y);
  prevHover.x = x;
  prevHover.y = y;
}

// Mouse out event
function mouseout (e) {
	renderTiles();
}

//...