Customizable Canvas Grid

v2-RC1

by smombartz

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Canvas Grid</title>

</head>
<body>
    <div id="gridsquare"><canvas id="grid"></canvas></div>
    
    <div id="grid-form">
        <FORM NAME="myform" ACTION="" METHOD="GET">Enter Grid Size<BR>
            <INPUT type="text" id="size" name="inputbox" value="">
            <INPUT type="button" name="button"  class="submit" Value="Click" onClick="setGrid(this.form)">
        </FORM>
        <a href="#">"Variable"px Grid</a> Bookmarklet
    </div>
       
</body>
</html>

CSS

body {
    font-family: 'Droid Sans', sans-serif;
    line-height: 150%;
}

#gridsquare {
    display: none;
}

#grid-form {
    width: 400px;
    height: 150px;
    padding: 10px;
    background-color: #FFF;
}

form { 
  margin: 10px 0 50px 0;
  height: 56px;
}

input {
  font-size: 24px;
  color: #333;
  text-decoration: none;
  border-width: 1px;
  border-style: solid;
}

input#size {
  width: 200px;
  height: 50px;
  border-left-width: 0;
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 1px;
  font-size: 18px;
  outline: none;
  color: #333;
  background: #fff;
  border-color: #999;
  padding: 0 0 0 10px;
  margin: 0 10px 0 0;
}

input.submit {
  width: 90px;
  height: 50px;
  text-decoration: none;
  text-align: center;
  border-color: #999;
  border-radius: 3px;
  background: #FCFCFC;
}

JavaScript

$(document).ready(function() {
    $("input[name='inputbox']").val(10);
    setGrid($("form[name='myform']"));
});

function setGrid(source)
{
    var canvas = document.getElementById('grid');
    var ctx = canvas.getContext('2d');
    var ghw= $("input[name='inputbox']",source).val();
    ctx.canvas.width = ghw;            
    ctx.canvas.height = ghw;     
    ctx.strokeStyle = "#FF0000";
    ctx.globalAlpha = 0.5;
    ctx.strokeRect(0.5, 0.5, ghw, ghw);
    ctx.lineWidth = 1;
    document.documentElement.style.backgroundImage = 'url(' + canvas.toDataURL() + ')';      
}