Monday 24 June 2013

How to perform simple transform on paint doodler


  1. Basic understanding of paint doodler interface
  2. Basic understanding of the paint doodler drawing layer architecture
  3. How to select image on paint doodler
  4. For tutorials visit

Setup Steps

  1. Logon to paint doodler website by opening  in your browser. Login by clicking Facebook,Twitter, or Google + icons on the home page. You will be presented with a screen. showing text "The Paint Doodlder is Loading. Please visit some of the tutorials below while it loads..." followed by "Paint Doodler is Ready Click here to continue". Click on this text to start working on the app.
  2. Ensure that static canvas is the topmost canvas layer. Image transformation are performed only on top static canvas layer. 
Steps to perform image transformation

Image transformation can be broken down into three steps
  1. Image Selection
    • Following toolbar icons can be used for image selection
    • Polygon,Triangle,Circle and Rectangle
    • Please visit the tutorial for image selection at for details
  2. Freeze selection click on the following tool bar icon to freeze selection
  3. Transform Tool
  4. Resize Tranform Selection
    • Click on one of the  toolbar icons for image selection describe in step 1 to enable resizing of the frozen image selection.
    • Select individual image selectors on the drawn canvas layer as shown in the video. Resize using the drag handles or providing appropriate length, width, shear on the tool controls.
    • Continue resizing,transforming selectors until you have created place holder for transformed shape.
    • Click on the following icon on the tool controls (last icon on the right handside) to apply the transformation.
    • ApplyTransform


  1. In order to remove image selectors click on the reset icon in tool box
    reset  tool
  2. When resizing shapes using the text boxes click on one of the adjacent text boxes to apply the resize. Clicking anywhere on the canvas will cause the selected image to be deselected and change will not be appied
  3. Images shapes (Rectangle, Square, Line, Bezier, Polygon, Image, Triangle  ) are placed on dynamic canvas which allows for simple resize,translate and shear transforms through the tools control. Please see below for the icons that can be used for the 

  4. Line, Bezier Curve, Polygon, Rectangle, Triangle, Circle,  Image

  5. In order to apply complex transformation on drawing  through the image selector tools described above  you would need to merge the dynamic with top most static canvas.. Please refer to the blog post on merging canvas at
  6. Image selection tools are different from the tools used for using dynamic selectors. Please notice a  tick at the bottom of the icon used for image selection.
  7. While merging the canvas source over merge option is used. Please refer tutorial on merge option at