Jquery: Show snap-to gridlines using droppable and draggable?

I am trying to show a $f00x$f00 grid (20x20 or 30x30 etc) (with gridlines) that an image can be dropped onto. I'm not sure how to get the grid to display do开发者_如何学运维es anyone have any ideas?

Implement this using a HTML5 Canvas:

1. Layer your canvas on top of the container (a div element for example) that your image would be dropped onto such that the coordinates line up. I.E. the canvas directly overlaps your container.
2. Make sure the canvas has a higher z-index than your image container.
3. Draw your grid lines onto the Canvas