Ibm Worklight - Using Canvas

I want to add canvas to my Worklight project. I learned how to create canvas from this tutorial: http://dev.opera.com/articles/view/html5-canvas-painting/ I tried to add the markup

Solution 1:

I didn't try with jQuery Mobile (as your code snippet implies...), but the following worked for me while previewing in Worklight Console:

1. Added to common\js a new canvas.js containing the code from here: http://pastebin.com/cd5wxJun

2. Added to the HEAD element in the .html file:

   <scriptsrc="js/canvas.js"></script><styletype="text/css">#container { position: relative; }
       #imageView { border: 1px solid #000; }
       #imageTemp { position: absolute; top: 1px; left: 1px; }
   </style>

3. Added to the body element in the .html file:

   <p><label>Drawing tool: 
           <selectid="dtool"><optionvalue="line">Line</option><optionvalue="rect">Rectangle</option><optionvalue="pencil">Pencil</option></select></label></p><divid="container"><canvasid="imageView"width="400"height="300"></canvas></div>

4. Build All and Deploy

5. Preview in Worklight Console