Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Drawing a hexagonal grid with HTML canvas
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas Hexagonal Map</title>
<style type="text/css">
canvas {
border:0;
display:block;
margin:0 auto;
}
</style>
</head>
<body>
<canvas id="hexmap" width="660" height="624"></canvas>
<script src="hexagons.js"></script>
</body>
</html>
(function(){
var canvas = document.getElementById('hexmap');
var hexHeight,
hexRadius,
hexRectangleHeight,
hexRectangleWidth,
hexagonAngle = 0.523598776, // 30 degrees in radians
sideLength = 10,
boardWidth = 100,
boardHeight = 100;
hexHeight = Math.sin(hexagonAngle) * sideLength;
hexRadius = Math.cos(hexagonAngle) * sideLength;
hexRectangleHeight = sideLength + 2 * hexHeight;
hexRectangleWidth = 2 * hexRadius;
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#000000";
ctx.strokeStyle = "#CCCCCC";
ctx.lineWidth = 1;
drawBoard(ctx, boardWidth, boardHeight);
canvas.addEventListener("mousemove", function(eventInfo) {
var x,
y,
hexX,
hexY,
screenX,
screenY,
rect;
rect = canvas.getBoundingClientRect();
x = eventInfo.clientX - rect.left;
y = eventInfo.clientY - rect.top;
hexY = Math.floor(y / (hexHeight + sideLength));
hexX = Math.floor((x - (hexY % 2) * hexRadius) / hexRectangleWidth);
screenX = hexX * hexRectangleWidth + ((hexY % 2) * hexRadius);
screenY = hexY * (hexHeight + sideLength);
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBoard(ctx, boardWidth, boardHeight);
// Check if the mouse's coords are on the board
if(hexX >= 0 && hexX < boardWidth) {
if(hexY >= 0 && hexY < boardHeight) {
ctx.fillStyle = "#000000";
drawHexagon(ctx, screenX, screenY, true);
}
}
});
}
function drawBoard(canvasContext, width, height) {
var i,
j;
for(i = 0; i < width; ++i) {
for(j = 0; j < height; ++j) {
drawHexagon(
ctx,
i * hexRectangleWidth + ((j % 2) * hexRadius),
j * (sideLength + hexHeight),
false
);
}
}
}
function drawHexagon(canvasContext, x, y, fill) {
var fill = fill || false;
canvasContext.beginPath();
canvasContext.moveTo(x + hexRadius, y);
canvasContext.lineTo(x + hexRectangleWidth, y + hexHeight);
canvasContext.lineTo(x + hexRectangleWidth, y + hexHeight + sideLength);
canvasContext.lineTo(x + hexRadius, y + hexRectangleHeight);
canvasContext.lineTo(x, y + sideLength + hexHeight);
canvasContext.lineTo(x, y + hexHeight);
canvasContext.closePath();
if(fill) {
canvasContext.fill();
} else {
canvasContext.stroke();
}
}
})();
@matthewisabel

This comment has been minimized.

Copy link
Owner Author

commented Dec 8, 2012

Added a few lines to fix the mouse positioning in FF. Using getBoundingClientRect(), I see the correct behavior in Chrome, FF, IE9, and Opera on Win 7.

@thewinger

This comment has been minimized.

Copy link

commented Dec 3, 2014

Hi Matthew,
Would it be possible to use your code to achieve an animation like this one?

Hexagon Animation

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.