Question

I have an image that has grid lines on it and would like to allow the user to draw thicker lines on those grid lines and each line should go from one intersection to the next. Where should I begin my research? I realize this is probably a very broad question, I am just looking for a bit of direction here. Looking for php and jquery/javascript solutions.

Much appreciation,
Todd

Answer 1

You can use <canvas> element.

1. Load your image into canvas using .drawImage().
2. Create onclick handler for canvas and draw lines.
3. Save the output from canvas into a image using toDataURL().

Links:

• This answer demonstrates drawing images onto canvas and retrieving the result with .toDataURL().

• This answer contains code how to retrieve coordinates of the click on the canvas.

Update:

As a bonus: HERE is the code to play with :). Drawing is there, but snapping to grids must be added. Tested with Chrome and Firefox.