Question

I’ve been using the following tutorial to allow the user to draw over an image:

http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/#demo-simple

Just the simple demo has been enough to allow the user to do what I want.

My next task, is to take the coordinates of the areas drawn by the user and store them in the database. The application is for a physiotherapist. The idea is that a user draws on a body where they are hurting and the physio can then bring the image up with the drawn image at a later date.

2 questions really:

1. How do I retrieve the area of the screen drawn on?
2. How would you draw the shapes back on to the image when retrieved from a database?

Answer 1

In the tutorial you have two arrays – clickX, clickY. Save points from these arrays after mouseleave and mouseup. It will be the area.
To draw the shapes serialize all areas so they will be available on the client and draw all areas with the code from redraw method like

for(var i=0; i < clickX.length; i++)
  {     
    context.beginPath();
    if(clickDrag[i] && i){
      context.moveTo(clickX[i-1], clickY[i-1]);
     }else{
       context.moveTo(clickX[i]-1, clickY[i]);
     }
     context.lineTo(clickX[i], clickY[i]);
     context.closePath();
     context.stroke();
  }

Did I understand you correct ?