how to draw grid using html5 and (canvas or svg)

Question

I want to draw a grid as shown in image but I totally don\'t have idea that where should I begin. Should I use SVG or should I use Canvas w

Answer 1

SVG can do this nicely using patterns:

I set width and height to 100%, so you can define the actual width and height on use, either for inline SVG:

or an element:

results in:

results in

Note that for this particular grid you have to use widths and heights of the form n x 80 + 1 (with n being any integer) if you want the grid to start and end with a thick stroke.