I found a simple box example on the Internet. It works great on PC.
When I launch it using Phonegap 2.7 on my Galaxy S4 (4.2.2), with Android 2.2 or 4.2.2, it simply doesn’t draw anything for the project.
What am I doing wrong?
<html lang="en"> <head> <meta charset="utf-8" /> <title>Desktops and Tablets</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script> <script type="text/javascript"> $(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 && 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 (ie 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"); } </script> </head> <body> <h1>Canvas test</h1> <div id="canvasDiv"> <canvas id="canvasSignature" width="500px" height="500px" style="border:2px solid #000000;"></canvas> </div> </body> </html>
Miko diko
source share