Dynaqmically create a polygon using HTML5

DRAWING A Diagram using HTML5. I want to dynamically create a diagram that only uses horizontal or vertical lines using the sample data below: +300B,+100G,+50R,+200B,-100R,200R,-200B,-200B,-55R,-280B The data is always in pairs, horizontal and vertical. The data should be entered using a form next to the diagram. The form should display 10 fields and allow the user to add additional fields if needed. The first point is top left (myX, myY). The first line will be horizontal to the right. If the line travels right or down then the number will be positive. Additionally the lines can be colored or styled using the letter after each number. B=BLACK,G=GREEN,R=RED So looking at the numbers above you can see the diagram will have the following lines - black Right, green Down, red Right, black Down, red Left, black Down, black Left, green Up, black Left, red Up The last horizontal and vertical lines should return to the starting point, so the last data set should be adjusted to ensure it does (In this case -55R,-280B should adjust to -50R,-300B. The diagram should be scaled proportionally to fill the canvas which is currently set to a square 800x800. The attached html file shows the expected diagram from the data above.