Project Description
Hexerly is a tiny set of helper functions for writing hexagonal games in HTML Canvas. The download includes a set of sample games.

Functions

There are just 4 Functions in Hexerly, and they're all you need for rendering and using a hex-tiled surface.

  drawHex(c, x, y, fillColor, borderColor)
  drawHexBorder(c, xOffset, yOffset, borderColors)
  columnRowToXY(column, row)
  xyToColumnRow(x, y)

Each of these is described below.

drawHex

Draws a hexagon at the given x,y coordinates.
"c" is the 2D context of a canvas element (this is a fundamental concept of canvas work and is described below)

  drawHex(c, x, y, fillColor, borderColor)

drawHexBorder

Draws an inner border on a hexagon that is located at the given x,y co-ordinates. This is useful for 'highlighting' a hexagon.
"c" is the 2D context of a canvas element (this is a fundamental concept of canvas work and is described below)

  drawHexBorder(c, xOffset, yOffset, borderColors)

columnRowToXY

Given a column number and a row number for a hexagon, what is the x,y co-ordinate of the upper left hand corner of that hexagon?

columnRowToXY(column, row)

Returns a 1 dimensional array with two elements: the x and y co-ordinate of the upper left hand corner of the hexagon at (column, row).

xyToColumnRow

Given an x and y co-ordinate anywhere inside our canvas, work out which hexagon it is inside.

For example, if a user has clicked at x and y, then which hexagon did they click?

  xyToColumnRow(x, y)

Returns a 1 dimensional array with two elements: the column number and the row number of the selected hexagon.

What is the 2D context of a canvas element?

The 'drawHex' and 'drawHexBorder' functions require a parameter named 'c' which is the 2D context of a canvas element.
I'll demonstrate what that means.
Say we have a canvas element named 'myCanvasElement', like so:

   <canvas id='myCanvasElement' width='800' height='600'> </canvas>

To use any of the html5 canvas functions we need to retrieve the '2D context' from this element, like so:

  var c = document.getElementById("myCanvasElement").getContext("2d");

All drawing is performed against the resulting 'c' variable.