HTML5 Picture Text WebApp for making social network picture status message

Using HTML5 and a great Canvas Javascript library Fabricjs, I made a simple web app for placing text string on images for sharing on social networks like Facebook, Google+ or Twitter. One or more text strings can be placed on the canvas. Once placed, the text can be edited, rotated, scaled, stretched or styled with different fonts and stroked. The background can be a plain color fill or a user defined image - the image can be set with some opacity value.

To run the web app, go to http://dominoc925-pages.appspot.com/webapp/picture_text/default.html.

Change the canvas

1. On the right pane, click Settings.
   
   
   
2. In the Canvas width field, type in a new width (in pixels) e.g. 800.
   
3. In the Canvas height field, type in a new height (in pixels) e.g. 600.
   
4. In the Canvas fill color field, pick a new background color e.g. grey.
   
5. To use an image for the background, choose Image in the Background combo box.
   
   Additional fields appear.
   
   
6. Click the Choose File button. Choose an image.
   
   The image is displayed in the canvas.
   
   
7. To change the image opacity, type in a value between 0 and 1 in the Background image opacity field.

Placing text

1. On the right pane, click Add new text.
   
   The Add text dialog appears.
   
   
2. Type in any text string in the Text string field.
   
3. Optional. Choose a font, font style, effects, line spacing, text alignment, text fill color from the various combo boxes.
   
4. Click Okay.
   
   The text string is placed randomly on the canvas.
   
   
5. Close the dialog.

Move, rotate, resize, stretch the text

1. Select the text string on the canvas.
   
   Handles appear around the text string.
   
2. To move the text, just drag it to a new location.
   
3. To resize the text, just press down SHIFT and drag the corner handles (four sided arrow cursor).
   
4. To rotate the text, just drag the corner handles (diagonal double headed arrow cursor).
   
   
   
5. To stretch the text, just drag the side handles (vertical or horizontal double headed arrow cursor). 

Changing the text properties

1. Select the text string on the canvas.
   
   The Properties and Delete buttons appear on the right pane.
   
   
2. On the right pane, click Properties.
   
   The Update text dialog appears.
   
   
3. To change the text string, just type in new text in the Text string field.
   
4. To change the font, style, effects, line spacing, or text alignment, use the combo boxes.
   
5. To change the text fill color, just pick another color in the Text fill color picker field.
   
6. To apply a stroke around the text, toggle on Stroke text. Then choose a color from the Text stroke color picker field. Choose a text stroke width in the Text stroke width field.
   
7. Click Okay.
   
   The text string is updated.
   
   
8. Close the dialog.
   

Creating the picture text image file

1. On the right pane, click Export image.
   
   The text is composited with the background and a new window of the PNG image pops up.
   
2. Right click on the image. Choose Save image as.
   
   
   
3. Type in a file name and save the image.