**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.