title: HTML5 canvas drawing line over ruler
body: <p>Please visit the following jsfiddle:- <a href="http://jsfiddle.net/mayanknimje87/GfaZ2/3/" rel="nofollow">http://jsfiddle.net/mayanknimje87/GfaZ2/3/</a></p>
  
  <p>there is a ruler and pencil. I can draw line over ruler when it is straight. But when i rotate the scale, drawing of line won't work. Also, i want to give animation, when user put pencil over the ruler (restrict to upper portion of ruler only not to bottom or middle),It start drawing line and animate. Ex. If user put pencil on ruler mark 15 then it should animate and draw line from 15 to 0 . Also user can draw line when pencil touches the top of ruler not in middle and bottom. Please help me out. It will be great to learn. Thanks in advance.</p>