HTML5 <canvas> grid

by jarosciak

HTML

<H1>TETROMINO PUZZLE SOLVER</H1>

<canvas id="c" width="301px" height="501px"></canvas>
<br>X:
<label id="xPos"></label>
<br>Y:
<label id="yPos"></label>

<br>Pixel Color:
<label id="pixColor"></label>

<br>
<button onclick="myFunction();">Clean Board</button>










































































<script>
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-23915674-6']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
  })();

  setTimeout(function() {

    document.body.insertAdjacentHTML(
      'afterBegin',
      '<a href="http://thinkingstiff.com" ' + 'target="_top" ' + 'onmouseover="this.style.opacity=\'.95\'" ' + 'onmouseout="this.style.opacity=\'1\'" ' + 'style="' + 'background-color: black;' + 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );' + 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );' + 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );' + 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );' + 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );' + 'border: 1px solid black;' + 'border-radius: 2px;' + 'bottom: 0;' + 'color: white;' + 'display: block;' + 'font-family: Helvetica, Verdana, Tahoma;' + 'opacity: 1;' + 'padding: 4px 8px;' + 'position: absolute;' + 'right: 0;' + 'text-decoration: none;' + 'text-shadow: -1px -1px black;' + 'z-index: 999;' + '">thinkingstiff.com</a>'
    );
  }, 2000);

</script>

CSS

#c {
  width: 301px;
  height: 501px;
}

JavaScript

var c_canvas = document.getElementById("c");
var context = c_canvas.getContext("2d");
var tetronimos = "I-I-L-L-O-O-T-T-Z-Z-X-X-l+l-l-l";

// Create Grid
for (var x = 0; x < 301; x += 50) {
  context.moveTo(x, 0);
  context.lineTo(x, 501);
}

for (var y = 0; y < 501; y += 50) {
  context.moveTo(0, y);
  context.lineTo(501, y);
}

myFunction();

function myFunction() {
  for (var x = 0; x < 301; x += 50) {
    for (var y = 0; y < 501; y += 50) {
      context.fillStyle = "#FFFFFF";
      context.fillRect(x, y, 48, 48);
    }
  }
}


function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

function findPos(obj) {
  var curleft = 0,
    curtop = 0;
  if (obj.offsetParent) {
    do {
      curleft += obj.offsetLeft;
      curtop += obj.offsetTop;
    } while (obj = obj.offsetParent);
    return {
      x: curleft,
      y: curtop
    };
  }
  return undefined;
}

function getNearestSquare(position) {
  var x = position.x;
  var y = position.y;
  if (x < 0 || y < 0) return null;
  x = (Math.floor(x / 50) * 50) + 1
  y = (Math.floor(y / 50) * 50) + 1
  return {
    x: x,
    y: y
  };
}

function rgbToHex(r, g, b) {
  if (r > 255 || g > 255 || b > 255)
    throw "Invalid color component";
  return ((r << 16) | (g << 8) | b).toString(16);
}


// Do on mouse click
$(c_canvas).click(function(evt) {
  var pos = getNearestSquare(getMousePos(c_canvas, evt));
  var pixelData = context.getImageData(pos.x, pos.y, 1, 1).data;
  var hex = "#" + ("000000" + rgbToHex(pixelData[0], pixelData[1], pixelData[2])).slice(-6);
  if (hex === "#000000") {
    hex = "#ffffff";
  }

  if (pos != null) {
    if (hex === "#ffffff") {
      context.fillStyle = "#ff0000";
      context.fillRect(pos.x, pos.y, 48, 48);
    } else {
      context.fillStyle = "#ffffff";
      context.fillRect(pos.x, pos.y, 48, 48);
    }
  }

  document.getElementById('pixColor').innerHTML = hex;
 ...