Paint app with flask

The paint app i made using html 5 canvas and javascript has been modified with a save option and flask is given as the backend.
When each picture is drawn details are stored as a json object. Like while a circle is drawn each detail is stored as a json object and pushed to a list.This list of objects is send to the database(here postgresql) and it is shown in the gallery.
When we click in any name in gallery it will retrieve the picture info from that name in database and will redraw in the canvas.

For example given below is the code for drawing circle in paint app.We added an extra line to store details about the circle on mouseup function.Then it is pushed into the list(here list name is  jsondata).

1:  function circle(){  
2:  canvas.onmousedown=circledown;  
3:  canvas.onmouseup=circleup;  
4:  canvas.onmousemove=circlemove;  
5:  function circledown(e){  
6:   img=context.getImageData(0,0,canvas.width,canvas.height);  
7:   startx=e.x;  
8:   starty=e.y;  
9:   drag3=true;  
10:  }  
11:  function circleup(e){  
12:  jsondata.push({"Type":"circle", "X0":startx,"Y0":starty,"X1":endx,"Y1":endy,"width":context.lineWidth,"color":context.strokeStyle,"fill":f})  
13:  drag3=false;  
14:  }  
15:  function circlemove(e){  
16:  if (drag3){  
17:  context.putImageData(img,0,0);  
18:  endx=e.x;  
19:  endy=e.y;  
20:  context.beginPath();  
21:  context.arc(Math.abs(endx+startx)/2,Math.abs(endy+starty)/2,Math.sqrt(Math.pow(endx-startx,2)+Math.pow(endy-starty,2))/2, 0, Math.PI*2, true);   
22:  context.closePath();  
23:  context.stroke();  
24:  if (f==1){  
25:  context.fill();  
26:  }  
27:  }}}  

In line number 12 the data is stored as a json variable.

Now the following code redraws the circle when the name is selected.

 if (l[i]["Type"]=='circle'){  
 context.beginPath();  
 context.arc(Math.abs(l[i]["X1"]+l[i]["X0"])/2,Math.abs(l[i]["Y1"]+l[i]["Y0"])/2,Math.sqrt(Math.pow(l[i]["X1"]-l[i]["X0"],2)+Math.pow(l[i]["Y1"]-l[i]["Y0"],2))/2, 0, Math.PI*2, true);   
 context.strokeStyle=l[i]['color']  
 context.fillStyle=l[i]['color']  
 context.lineWidth=l[i]['width']  
 if(l[i]['fill']==1){  
 context.fill()  
 }  
 context.stroke();  
 context.closePath();  
 }  

where l is defined as

 l=JSON.parse(imagedata);  

That is the json variable is stored as string in database.We take it back and redraw it by parsifying that data.

By using flask the whole paint app became efficient ,interactive and useful.

Following shows the screen shots from my paint app.

when we click the save button a "saved" alert wil pop up.

Then if we check out the gallery we can see the name of pic in there.

If there are more than one picture ,the names will appear as a list.

Then when we click on that this canvas page will appear.

Click on the load button and the image will be retrieved from database.

And thats how the paint app works.

My app is stored in heroku. You test it by clicking this link.

Click here to see the code in github .