As I asked in the question, in a cordova app, in browser and electron platform, painting works, but in android platform trying to draw on canvas does not. Clicking on canvas, instead of drawing, I drag the screen.
The code follows.
Here is the html:
<div class="centerPainting">
<h1>Painting: hold down the mouse button to draw in the rectangle below.</h1><div id="container"><canvas id="imageView" width="300" height="300">
<p>Unfortunately, your platform does not support the canvas element.</p>
</canvas>
</div>
</div>
Here is the CSS:
#container {
position: relative;
}
#imageView {
border: 1px solid #000;
}
.centerPainting {
margin: auto;
width: 300px;
padding: 10px;
/* The CSS below stops users from being able to select text. */
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
}
Here is the Javascript:
document.addEventListener('deviceready', onDeviceReady, false);
function onDeviceReady() {
var canvas, context, tool;
init();
}
function init () {
// Find the canvas element.
canvas = document.getElementById('imageView');
if (!canvas) {
alert('Error: I cannot find the canvas element!');
return;
}
if (!canvas.getContext) {
alert('Error: no canvas.getContext!');
return;
}
// Get the 2D canvas context.
context = canvas.getContext('2d');
if (!context) {
alert('Error: failed to getContext!');
return;
}
// Pencil tool instance.
tool = new tool_pencil();
// Attach the mousedown, mousemove and mouseup event listeners.
canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup', ev_canvas, false);
}
// This painting tool works like a drawing pencil which tracks the mouse
// movements.
function tool_pencil () {
var tool = this;
this.started = false;
// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
// This function is called every time you move the mouse. Obviously, it only
// draws if the tool.started state is set to true (when you are holding down
// the mouse button).
this.mousemove = function (ev) {
if (tool.started) {
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
// This is called when you release the mouse button.
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
}
};
}
// The general-purpose event handler. This function just determines the mouse
// position relative to the canvas element.
function ev_canvas (ev) {
if (ev.layerX || ev.layerX == 0) { // Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
func(ev);
}
}
How do I fix that?
Update: After Morrison Chang's comment, I changed my code to:
// Attach the mousedown, mousemove and mouseup event listeners.
canvas.addEventListener('mousedown touchstart', ev_canvas, false);
canvas.addEventListener('mousemove touchmove', ev_canvas, false);
canvas.addEventListener('mouseup touchend', ev_canvas, false);
But it still does not work.
Update 2: I added multiple event listeners, as this developer did:
adding multiple event listeners to one element
So, I added this code:
// Attach the touchstart, touchmove and touchend event listeners.
canvas.addEventListener('touchstart', ev_canvas, false);
canvas.addEventListener('touchmove', ev_canvas, false);
canvas.addEventListener('touchend', ev_canvas, false);
and this code:
this.touchstart = function (ev) {
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
this.touchmove = function (ev) {
if (tool.started) {
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
this.touchend = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
}
};
But still, it doesn't work.
