Customizable Canvas Grid

v2

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
            <INPUT TYPE="text" NAME="inputbox" VALUE="">
            <br>
            Grid Start: <input type="radio" name="gridstart" id="left-val" value="left" checked /> <label for="left-val">Left</label> 
            <input type="radio" name="gridstart" value="center" id="center-val" /> <label for="center-val">Center</label>  
            <input type="radio" name="gridstart" value="right" id="right-val" /> <label for="right-val">Right</label>  
            <br>
            <INPUT TYPE="button" NAME="button" Value="Click" onClick="setGrid(this.form)">
        </FORM>
        <a href="#" id="bookmarklet"><span id="gridsize-val">"Variable"</span>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: 120px;
    padding: 10px;
    background-color: #FFF;
}

JavaScript

var gridstart = "left";
$(document).ready(function() {
    $("input:radio[name=gridstart]").click(function(){
        gridstart = $(this).val();                   
    });      
    $("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();
    $("#gridsize-val").html(ghw);
    ctx.canvas.width = ghw;            
    ctx.canvas.height = ghw;     
    ctx.strokeStyle = "#FF0000";
    ctx.strokeRect(0.5, 0.5, ghw, ghw);
    ctx.lineWidth = 1;
    
    document.documentElement.style.backgroundImage = 'url(' + canvas.toDataURL() + ')';  
    document.documentElement.style.backgroundPosition = "top "+gridstart;
    
    var link = 'javascript:(function(){window.vpg={ghw:'+ghw+',gridstart:"'+gridstart+'"};var a=document.createElement("script");a.src="http://lukevella.com/vpg.js";document.getElementsByTagName("HEAD")[0].appendChild(a)})()';
    $("#bookmarklet").attr('href',link);
}