Draw background grid in HTML5

Question

I would like to draw a rectangular grid on the background using HTML5 Canvas API. Please, what is the easiest way how to do that? (opacity should be 0.5)

Answer 1

As My Head Hurts has pointed out, this has been asked before.

Here is the: code/demo.

You also asked for the opacity to be 0.5. You can do this with fillstyle:

ctx.fillStyle = 'rgba(0,0,0, 0.5)'; 

You can add that before the draw call. But don't forget to set it back to 1 after the call. Also, make sure ctx is changed to the name of your context var.

Note: You'll probably get a better reception next time if you show that you've put some effort into finding the solution yourself, either by adding what you've tried or making sure there aren't any exact duplicate posts. :)