jquery mobile - Canvas not defined -

I'm experimenting with Raymond Camden's watermark code and also from the phonegap camera API.

The camera works well

However,

  Unwanted reference references: Canvas is not defined   < P> Logcat is shown in  
 I have tried to keep the variable in the function as well as in the global position. But the error still appears My code is as follows:  
  & lt ;! DOCTYPE html & gt; & Lt; Top & gt; & Lt; Script type = "text / javascript" charset = "utf-8" src = "cordova-2.7.0.js" & gt; & Lt; / Script & gt; & Lt; Link rel = "stylesheet" type = "text / css" href = "jquery / css / jquery.mobile-1.3.1.min.css" /> & Lt; Script type = "text / javascript" charset = "utf-8" src = "jquery / jquery-1.9.1.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" charset = "utf-8" src = "jquery / jquery.mobile-1.3.1.min.js" & gt; & Lt; Script & gt; & Lt; Script type = "text / javascript" charset = "UTF-8" & gt; War watermark; Var Canvasodom; Var Canvas; Document.addEventListener ("deviceready", onDeviceReady, false); Device readie () {} & lt; / Script & gt; & Lt; Script type = "text / javascript" charset = "UTF-8" & gt; Canvasum = $ ("McNawus") [0]; Canvas = canvas DOM.getContext ("2D"); Watermark = new image (); Watermark. Src = "q1.jpg"; Function Cybershot () {navigator.camera.getPicture (camSuccess, camError, {quality: 75, targetWidth: 400, targetHeight: 400, destination type: Camera.DestinationType.FILE_URI}); } Function camError (e) {console.log ("camera error"); Console.log (json.stringify (e)); } Function camSuccess (picker) {console.log ("camera success"); Var img = new image (); Img.src = picuri; Img.onload = function (e) {canvas.drawImage (IMG, 0, 0); Canvas.drawImage (watermark, canvasdome.windth-watermark.Wide, canvasdom.height - watermark.html); }} & Lt; / Script & gt; & Lt; Style & gt; #Mac canvas {width: 400px; Height: 400 pixels; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; H1 & gt; Watermark camera & lt; / H1> & Lt; Button onclick = "cybershot ();" & Gt; Capture photo & lt; / Button & gt; & Lt; Br> & Lt; P / & gt; & Lt; Canvas id = "myCanvas" & gt; & Lt; / Canvas & gt; & Lt; / Body & gt; & Lt; / Html & gt;    
 
 
 resolve  
 There is an error in this code.  
 The javascript used should be kept within the   onDeviceReady ()   function. This classic   jQuery   document is equivalent to the preparation.  
 In this case, javascript   HEAD    body   content   DOM   before loading in . Delay its execution until it is loaded in   onDeviceReady ()     DOM  .  
 Fixed code  
 Your javascript should look like this:  
  var canvas; War watermark; Document.addEventListener ("deviceready", onDeviceReady, false); Function OnDevice Read () {canvasDOM = $ ("myCanvas") [0]; Canvas = canvas DOM.getContext ("2D"); Watermark = new image (); Watermark. Src = "q1.jpg"; } CyberShot () {navigator.camera.getPicture (camSuccess, camError, {quality: 75, targetWidth: 400, targetHeight: 400, destination type: Camera.DestinationType.FILE_URI}); } Function camError (e) {console.log ("camera error"); Console.log (json.stringify (e)); } Function camSuccess (picker) {console.log ("camera success"); Var img = new image (); Img.src = picuri; Img.onload = function (e) {canvas.drawImage (IMG, 0, 0); Canvas.drawImage (watermark, canvasdome.windth-watermark.Wide, canvasdom.height - watermark.html); }}