Menu
I'm using a html5 canvas + some javascript (onmousedown/move/up) to create simple draw pad on a webpage.
Works OK in Opera, Firefox, Chrome, etc (tried on desktop PCs). But if I visit this page with an iPhone, when trying to draw on the canvas, instead it drags or scrolls the page.
This is fine for other page content, by sliding the page up an down you can navigate through the page in a mobile browser as usual. But is there a way to disable this behavior on the canvas, so that also mobile visitors can actually draw something on it?
For your reference, here's a minimalisic example:
<html><head><script type='text/javascript'>
function init()
{
var canvas = document.getElementById('MyCanvas');
var ctx = canvas.getContext('2d');
var x = null;
var y;
canvas.onmousedown = function(e)
{
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
ctx.beginPath();
ctx.moveTo(x,y);
}
canvas.onmouseup = function(e)
{
x = null;
}
canvas.onmousemove = function(e)
{
if (x==null) return;
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetLeft;
ctx.lineTo(x,y);
ctx.stroke();
}
}
</script></head><body onload='init()'>
<canvas id='MyCanvas' width='500' height='500' style='border:1px solid #777'>
</canvas></body></html>
Is there some special style or event I have to add to the canvas, in order to avoid dragging/scrolling the page when swiping in the canvas?
937
HTML5 Canvas is supported by all major browsers and can be accessed from desktops, tablets, and smartphones – once created a canvas application can run almost anywhere (unlike Flash and Silverlight). HTML5 Canvas offers great portability from desktops to mobile devices.
The HTML5 canvas has the potential to become a staple of the web, enjoying ubiquitous browser and platform support in addition to widespread webpage support, as nearly 90% of websites have ported to HTML5.
The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images.
iPad / iPhone doesn't have mouse* events. You need to use touchstart, touchmove and touchend. This events can have multiple touches so you need to get first one like this:
canvas.ontouchstart = function(e) {
if (e.touches) e = e.touches[0];
return false;
}
It's important to return false in touch start method because otherwise page scroll is triggered.
152
I'm going to add to Grassator's answer by adding a link to this answer that goes more in-depth with the code required to make this solution work: https://stackoverflow.com/a/16630678/5843693.
Before I continue, please note that Apple has changed the way iOS handles scrolling on more recent devices. To handle this change, it is necessary to add a few extra functions; thanks to Christopher Vickers for sharing this:
function preventDefault(e) {
e.preventDefault();
}
function disableScroll() {
document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll() {
document.body.removeEventListener('touchmove', preventDefault);
}
The methods for canvas are all called upon in a drawer fashion like so:
var drawer = {
isDrawing: false,
touchstart: function (coors) {
ctx.beginPath();
ctx.moveTo(coors.x, coors.y);
this.isDrawing = true;
disableScroll(); // add for new iOS support
},
touchmove: function (coors) {
if (this.isDrawing) {
ctx.lineTo(coors.x, coors.y);
ctx.stroke();
}
},
touchend: function (coors) {
if (this.isDrawing) {
this.touchmove(coors);
this.isDrawing = false;
}
enableScroll(); // add for new iOS support
}
};
In addition, EventListeners are specifically ordered so that touch inputs are taken first:
var touchAvailable = ('createTouch' in document) || ('onstarttouch' in window);
if (touchAvailable) {
canvas.addEventListener('touchstart', draw, false);
canvas.addEventListener('touchmove', draw, false);
canvas.addEventListener('touchend', draw, false);
} else {
canvas.addEventListener('mousedown', draw, false);
canvas.addEventListener('mousemove', draw, false);
canvas.addEventListener('mouseup', draw, false);
}
Finally, the "elastic" scrolling is prevented by adding one more EventListener near the end of the code.
document.body.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);
All of this is placed inside window.addEventListener('load', function () {}).
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
