CODEWITHSUNDEEP
jquery-mobilecanvascordova
Cyberwalk
Cyberwalk

Reputation: 667

Canvas not defined

I am experimenting with Raymond Camden's watermark code and also example from Phonegap camera API.

Camera works well.

However,

Uncaught ReferenceError: canvas is not defined

is shown in LogCat.

I have tried to place the variables in function as well as global. But the error still appears. My code is as below:

<!DOCTYPE html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.3.1.min.css"/>
<script type="text/javascript" charset="utf-8" src="jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.3.1.min.js"><script>
<script type="text/javascript" charset="utf-8">

var watermark;
var canvasDOM;
var canvas;


document.addEventListener("deviceready",onDeviceReady,false);


function onDeviceReady() {

} </script>

<script type="text/javascript" charset="utf-8">

    canvasDOM = $("myCanvas")[0];
    canvas = canvasDOM.getContext("2d");

    watermark = new Image();
    watermark.src = "q1.jpg";

    function cybershot() {
    navigator.camera.getPicture(camSuccess, camError, {quality: 75, targetWidth: 400, targetHeight: 400, destinationType: Camera.DestinationType.FILE_URI});
    }

    function camError(e) {
    console.log("Camera Error");
    console.log(JSON.stringify(e));
    }


    function camSuccess(picuri) {
    console.log("Camera Success");

    var img = new Image();
    img.src=picuri;

    img.onload = function(e) {
        canvas.drawImage(img, 0, 0);
        canvas.drawImage(watermark, canvasDOM.width-watermark.width, canvasDOM.height - watermark.height);
    }


    }


</script>


<style>
#myCanvas {
    width: 400px;
    height: 400px;
}
</style>


  </head>
  <body>
  <h1>Watermark Camera</h1>


  <button onclick="cybershot();">Capture Photo</button> <br>


  <p/>

  <canvas id="myCanvas"></canvas>
</body>
</html>

Upvotes: 0

Views: 4474

Answers (2)

Gajotres
Gajotres

Reputation: 57319

Solution

There's an error in this code.

Javascript used must be placed inside a onDeviceReady() function. It is an equivalent of classic jQuery document ready.

In this case javascript is executed inside a HEAD before BODY content is loaded into the DOM. onDeviceReady() will delay its execution until everything is loaded into the DOM.

Fixed code

Your javascript should look like this:

var canvas;
var watermark;

document.addEventListener("deviceready",onDeviceReady,false);  

function onDeviceReady() {
    canvasDOM = $("myCanvas")[0];
    canvas = canvasDOM.getContext("2d");
    
    watermark = new Image();
    watermark.src = "q1.jpg";    
} 

function cybershot() {
    navigator.camera.getPicture(camSuccess, camError, {quality: 75, targetWidth: 400, targetHeight: 400, destinationType: Camera.DestinationType.FILE_URI});
}

function camError(e) {
    console.log("Camera Error");
    console.log(JSON.stringify(e));
}


function camSuccess(picuri) {
    console.log("Camera Success");
    
    var img = new Image();
    img.src=picuri;
    
    img.onload = function(e) {
        canvas.drawImage(img, 0, 0);
        canvas.drawImage(watermark, canvasDOM.width-watermark.width, canvasDOM.height - watermark.height);
    }  
}

Upvotes: 2

Balint Bako
Balint Bako

Reputation: 2560

Try moving this part (the entire content of the script block) canvasDOM = $("myCanvas")[0]; into $(document).ready(function(){ });

Upvotes: 1

Related Questions