Paint app using Flask and postgresql

Paint application using postgresql i defined earlier is implementing in Flask.Here database is postgresql.

The paint app that was created using HTML5 canvas and javascript is modified with a save option. When each object is drawn all the details about that object is saved as a JSON object. Then it is saved to the postgreSql database.

For example when a Rectangle object is drawn the details such as width, height starting points etc are saved as a JSON object.Then it is added to a list


After everything is drawn the list will contain all the info of drawn objects as a list in the order of appearences.

Then it is saved to the database.

Example: Saving object info using JSON object.

Here on each drawing function JSONDATA.push is used.for example:

jsondata.push({"Type":"pencil", "X0":sX,"Y0":sY,"X1":mX,"Y1":mY,"width":c.lineWidth,"color":c.strokeStyle})data=JSON.stringify(jsondata)

Then this 'data' is posted to python program and insert to database using sql query.

At the time of reloading a selected picture these details are retrieved from database and redrawn in the canvas.
The following code shows how to redraw a rectangle in the canvas. The stringified data is parsed before it is drawn on canvas.

l=JSON.parse(data);

Then check the type in list 'l' and redraw.For example:

if(l[i]['Type']=='line'){
context.beginPath()
x0=l[i]['X0']
y0=l[i]['Y0']
x1=l[i]['X1']
y1=l[i]['Y1']
context.moveTo(x0,y0)
context.lineTo(x1,y1)
context.lineWidth=l[i]['width'];
context.strokeStyle=l[i]['color'];
context.stroke()
context.closePath()
}
context.beginPath()
x0=l[i]['X0']
y0=l[i]['Y0']
x1=l[i]['X1']
y1=l[i]['Y1']
context.moveTo(x0,y0)
context.lineTo(x1,y1)
context.lineWidth=l[i]['width'];
context.strokeStyle=l[i]['color'];
context.stroke()
context.closePath()
}

jsondata.push({"Type":"pencil", "X0":sX,"Y0":sY,"X1":mX,"Y1":mY,"width":c.lineWidth,"color":c.strokeStyle})data=JSON.stringify(jsondata)

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

To view this code : Click here

To view the paint app which i deployed in heroku click here