Databases
StackOverflow2013
Postsdbo
POCan't draw on a HTML5 Canvas using Phonegap 2.7
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan't draw on a HTML5 Canvas using Phonegap 2.7
    text
    copied!<p>I've found a simple drawer example online. It works fine on the PC.</p> <p>When I run it, using Phonegap 2.7, on my Galaxy S4 (4.2.2), with Android 2.2 or 4.2.2, for the project, it just doesn't draw anything at all.</p> <p>What am I doing wrong ?</p> <pre><code>&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;Desktops and Tablets&lt;/title&gt; &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function () { initialize(); }); // works out the X, Y position of the click inside the canvas from the X, Y position on the page function getPosition(mouseEvent, sigCanvas) { var x, y; if (mouseEvent.pageX != undefined &amp;&amp; mouseEvent.pageY != undefined) { x = mouseEvent.pageX; y = mouseEvent.pageY; } else { x = mouseEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; y = mouseEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop; } return { X: x - sigCanvas.offsetLeft, Y: y - sigCanvas.offsetTop }; } var sigCanvas; var context; function initialize() { sigCanvas = document.getElementById("canvasSignature"); context = sigCanvas.getContext("2d"); context.strokeStyle = 'Black'; context.lineWidth = 1; if ('ontouchstart' in document.documentElement) { var drawer = { isDrawing: false, touchstart: function (coors) { context.beginPath(); context.moveTo(coors.x, coors.y); this.isDrawing = true; }, touchmove: function (coors) { if (this.isDrawing) { context.lineTo(coors.x, coors.y); context.stroke(); } }, touchend: function (coors) { if (this.isDrawing) { this.touchmove(coors); this.isDrawing = false; } } }; // create a function to pass touch events and coordinates to drawer function draw(event) { if (event.targetTouches[0] === undefined) { context.closePath(); this.isDrawing = false; return; } // get the touch coordinates. Using the first touch in case of multi-touch var coors = { x: event.targetTouches[0].pageX, y: event.targetTouches[0].pageY }; // Now we need to get the offset of the canvas location var obj = sigCanvas; if (obj.offsetParent) { // Every time we find a new object, we add its offsetLeft and offsetTop to curleft and curtop. do { coors.x -= obj.offsetLeft; coors.y -= obj.offsetTop; } // The while loop can be "while (obj = obj.offsetParent)" only, which does return null // when null is passed back, but that creates a warning in some editors (i.e. VS2010). while ((obj = obj.offsetParent) != null); } // pass the coordinates to the appropriate handler drawer[event.type](coors); } // attach the touchstart, touchmove, touchend event listeners. sigCanvas.addEventListener('touchstart', draw, false); sigCanvas.addEventListener('touchmove', draw, false); sigCanvas.addEventListener('touchend', draw, false); // prevent elastic scrolling sigCanvas.addEventListener('touchmove', function (event) { event.preventDefault(); }, false); } else { // start drawing when the mousedown event fires, and attach handlers to // draw a line to wherever the mouse moves to $("#canvasSignature").mousedown(function (mouseEvent) { var position = getPosition(mouseEvent, sigCanvas); context.moveTo(position.X, position.Y); context.beginPath(); $(this).mousemove(function (mouseEvent) { drawLine(mouseEvent, sigCanvas, context); }).mouseup(function (mouseEvent) { finishDrawing(mouseEvent, sigCanvas, context); }).mouseout(function (mouseEvent) { finishDrawing(mouseEvent, sigCanvas, context); }); }); } } // draws a line to the x and y coordinates of the mouse event inside // the specified element using the specified context function drawLine(mouseEvent, sigCanvas, context) { var position = getPosition(mouseEvent, sigCanvas); context.lineTo(position.X, position.Y); context.stroke(); } // draws a line from the last coordiantes in the path to the finishing // coordinates and unbind any event handlers which need to be preceded // by the mouse down event function finishDrawing(mouseEvent, sigCanvas, context) { // draw the line to the finishing coordinates drawLine(mouseEvent, sigCanvas, context); context.closePath(); // unbind any events which could draw $(sigCanvas).unbind("mousemove") .unbind("mouseup") .unbind("mouseout"); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Canvas test&lt;/h1&gt; &lt;div id="canvasDiv"&gt; &lt;canvas id="canvasSignature" width="500px" height="500px" style="border:2px solid #000000;"&gt;&lt;/canvas&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload