Drawing with the Web Canvas on the N800
1 2 <html> 3 <head> 4 <title>Webcanvas test</title> 5 <style type="text/css"> 6 canvas { border: 1px solid black; } 7 </style> 8 <script type="text/javascript" 9 src="webcanvas/excanvas.js"></script> 10 <script type="text/javascript" 11 src="webcanvas/json2.js"></script> 12 <script type="text/javascript" 13 src="webcanvas/character.js"></script> 14 <script type="text/javascript" 15 src="webcanvas/webcanvas.js"></script> 16 17 18 <script type="text/javascript"> 19 var webcanvas = null; 20 21 function canvasLoad() { 22 var canvas = document.getElementById("webcanvas"); 23 24 if (canvas.getContext) { 25 webcanvas = new WebCanvas(canvas); 26 webcanvas.draw(); 27 } 28 } 29 30 function writingToXML(writing) { 31 var char = new Character(); 32 char.setUTF8("?"); 33 char.setWriting(writing); 34 return char.toXML(); 35 } 36 37 function canvasToXML() { 38 if (webcanvas) { 39 var writing = webcanvas.getWriting(); 40 41 var output_textarea = document. 42 getElementById("output_textarea"); 43 44 output_textarea.value = writingToXML(writing); 45 } 46 } 47 48 function canvasToPNG() { 49 if (webcanvas) { 50 var dataURL = webcanvas.toPNG(); 51 52 if (dataURL) { 53 var preview = document.getElementById("preview"); 54 if(preview.childNodes.length == 2) { 55 var image = preview.childNodes[1]; 56 } 57 else { 58 var image = document.createElement("img"); 59 preview.appendChild(image); 60 } 61 62 image.src = dataURL; 63 } 64 } 65 } 66 67 function canvasToPNGURL() { 68 if (webcanvas) { 69 70 var dataURL = webcanvas.toPNG(); 71 72 if (dataURL) { 73 window.open(dataURL, "_blank"); 74 } 75 } 76 } 77 78 function canvasLoadJSON() { 79 if (webcanvas) { 80 var input_textarea = document. 81 getElementById("input_textarea"); 82 83 var json = JSON.parse(input_textarea.value); 84 85 var char = new Character(); 86 char.copy(json); 87 88 webcanvas.setWriting(char.getWriting()); 89 } 90 91 } 92 93 function canvasClear() { 94 if (webcanvas) { 95 webcanvas.clear(); 96 document.getElementById("output_textarea").value = ""; 97 } 98 } 99 100 function canvasRevertStroke() { 101 if (webcanvas) { 102 webcanvas.revertStroke(); 103 } 104 } 105 106 function canvasReplay() { 107 if (webcanvas) { 108 webcanvas.replay(); 109 } 110 } 111 </script> 112 </head> 113 114 <body onload="canvasLoad();"> 115 116 <canvas id="webcanvas" width="780" height="400"> 117 Fallback content (can be an img tag) 118 </canvas> 119 120 </body> 121 </html> 122
Here is a quick sketch drawn with the webcanvas. [twitxr.com]