Canvas How to - Draw ruler

Question

We would like to know how to draw ruler.

Answer


<!--  ww w.j a va  2  s.  c o m-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
drawRuler();
function drawRuler()
{
    var canvas = document.getElementById('timeline');
  var context = canvas.getContext('2d');
    var spacing = 20;
    context.lineWidth= 0.1;
    context.strokeStyle = '#555';
    context.beginPath();
    for(var interval = 0; interval < 24; interval++)
    {
        context.moveTo(interval*spacing+0.5,50);
        context.lineTo(interval*spacing+0.5,42); 
        context.stroke();
    }
}
}//]]>  
</script>
</head>
<body>
  <canvas id="timeline" width="800" height="50"></canvas>
</body>
</html>

The code above is rendered as follows: