IBM工作灯 - 使用Canvas(IBM Worklight - Using Canvas)

我想画布添加到我的工作灯项目。
我学会了如何从本教程中创建的画布： http://dev.opera.com/articles/view/html5-canvas-painting/

我试图标记和JavaScript添加到我的项目，也没有显示错误，但是当我建立并运行到我的设备，它说：

无法找到canvas元素

这一点，我添加到我的项目中的代码。

   <div data-role="page" id="thiscanvas">
            <div data-position="fixed" data-role="header" id="header">
                <h3>Drawing<br>On Canvas</h3>
            </div>

            <div data-role="content" style="padding: 15px; background: url(images/bgold.png) repeat-x center;max-height:100%;">
                <table>
                    <tbody>
                    <tr>
                        <td><p><label>Drawing tool</label></p></td>
                        <td><p><label>:</label></p></td>
                        <td><p><select id="dtool">
                            <option value="rect">Rectangle</option>
                            <option value="pencil">Pencil</option>
                            </select></p></td>
                    </tr>
                    <tr>
                        <td><p><label>Color tool</label></p></td>
                        <td><p><label>:</label></p></td>
                        <td><p><select id="ctool">
                        <option value="#000000">Black</option>
                        <option value="#0000ff">Blue</option>
                        <option value="#00ff00">Green</option>
                        <option value="#ff0000">Red</option>
                        </select></p></td>
                    </tr>
                    </tbody>
               </table>



                <p>Try to draw on canvas.</p>
                <div id="container" >
                  <canvas id="imageView" width="400" height="300" style="background: url(images/motif-batik-indonesia-solo.gif);">
                    Sorry your browser didn't support.
                    Supported browsers: <a href="http://www.opera.com">Opera</a>, <a 
                      href="http://www.mozilla.com">Firefox</a>, <a 
                      href="http://www.apple.com/safari">Safari</a>, and <a 
                      href="http://www.konqueror.org">Konqueror</a>.
                  </canvas>
                </div>


            </div>

            <div data-role="footer" class="footer-docs" data-theme="c">
                <p>Copyright 2013, Fastfoura</p>
            </div>

我没有使用jQuery移动（如您的代码段意味着...）试试，但下面为我工作，而在工作灯控制台预览：

加入到共同\ JS新canvas.js从这里包含的代码： http://pastebin.com/cd5wxJun

添加到.html文件HEAD元素：

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

添加到.html文件body元素：

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