Canvas Lines

Canvas is not supported on this browser.

Source Code

<script type="text/javascript">
  //<![CDATA[

  // draw lines on canvas
  var drawLines = function() {
      var canvas = document.getElementById('canvasLines');
      if (canvas.getContext) {
          var ctx = canvas.getContext('2d');

          // set canvas size (to maximum for window size)
          var width = window.innerWidth - ctx.canvas.offsetLeft - 20;
          var height = window.innerHeight - ctx.canvas.offsetTop - 20;
          ctx.canvas.width = width;
          ctx.canvas.height = height;

          ctx.strokeStyle = '#0000FF';
          for (var x = 0; x < width; x += 8) {
              var y = x * height / width;
              ctx.moveTo(0, y);
              ctx.lineTo(x, height);
              ctx.stroke();
          }
      }
  }

  window.onload = drawLines;

  //]]>
</script>

<h1>Canvas Lines</h1>

<canvas id="canvasLines" width="200" height="200">
  <p>Canvas is not supported on this browser.</p>
</canvas>