class Hexogen{

}


    var canvas = document.getElementById('hexagonCanvas');
    var hexHeight,
        hexRadius,
        hexRectangleHeight,
        hexRectangleWidth,
        hexagonAngle = 0.523598776, //30 градусов в радианах
        sideLength = 20, //длина стороны, пискелов
        boardWidth = 200, //ширина "доски" по вертикали
        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 = "#d2d2d2";
     ctx.lineWidth = 2;

     drawBoard(ctx, boardWidth, boardHeight);
     /*canvas.addEventListener("mousemove", function(eventInfo) { //слушатель перемещения мыши
      var x = eventInfo.offsetX || eventInfo.layerX;
      var y = eventInfo.offsetY || eventInfo.layerY;
      var hexY = Math.floor(y / (hexHeight + sideLength));
      var hexX = Math.floor((x - (hexY % 2) * hexRadius) / hexRectangleWidth);
      var screenX = hexX * hexRectangleWidth + ((hexY % 2) * hexRadius);
      var screenY = hexY * (hexHeight + sideLength);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBoard(ctx, boardWidth, boardHeight);
        ctx.fillStyle = "#4dfe4d";//
        drawHexagon (ctx, screenX, screenY, true);

     });*/


    function drawBoard (canvasContext, width, height) {
     for (var i = 0; i < width; i++) {
      for (var 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;
     if (fill) canvasContext.fill();
     else canvasContext.stroke();
     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();

    }