HTML5 <canvas> grid

by odrelon

HTML

<canvas id="c" width="501px" height="381px" ></canvas>













































































<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>' 
        ); 
    },...

CSS

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

JavaScript

var c_canvas = document.getElementById("c");
var context = c_canvas.getContext("2d");

for (var x = 0.5; x < 501; x += 10) {
  context.moveTo(x, 0);
  context.lineTo(x, 381);
}

for (var y = 0.5; y < 381; y += 10) {
  context.moveTo(0, y);
  context.lineTo(500, y);
}

context.moveTo(0,0);
context.lineTo(380,380);

context.strokeStyle = "#ddd";
context.stroke();