CODEWITHSUNDEEP
javascriptipadhtmlcanvastouch
Mikelon85
Mikelon85

Reputation: 432

Draw with finger in html on ipad?

I´m trying to write with finger in canvas element. It works on desktop browsers but not in the ipad.
I try with touchstart, touchend, touchmove event too, but it doesn´t work on ipad.

var pizarra_canvas
var pizarra_context

function init(){            
    pizarra_canvas = document.getElementById("pizarra");
    pizarra_context = pizarra_canvas.getContext("2d");
    pizarra_context.strokeStyle = "#000";
    pizarra_canvas.addEventListener('mousedown',empezarPintar,false);
    pizarra_canvas.addEventListener('mouseup',terminarPintar,false);
    }   

function empezarPintar(e){
pizarra_context.beginPath();
pizarra_context.moveTo(e.clientX-pizarra_canvas.offsetLeft,e.clientY-pizarra_canvas.offsetTop);
pizarra_canvas.addEventListener('mousemove',pintar,false)
}

function terminarPintar(e){
pizarra_canvas.removeEventListener('mousemove',pintar,false);
}

function pintar(e) {
pizarra_context.lineTo(e.clientX-pizarra_canvas.offsetLeft,e.clientY-pizarra_canvas.offsetTop);
pizarra_context.stroke();
}

Upvotes: 2

Views: 2933

Answers (1)

methodofaction
methodofaction

Reputation: 72415

You need to cancel the default event (which is scrolling). Additionally, it is better that you trigger mouseup/touchend on the document because if you leave the dragging area and release the button then the canvas doesn't know it should stop drawing.

var pizarra_canvas
var pizarra_context

function init(){            
    pizarra_canvas = document.getElementById("pizarra");
    pizarra_context = pizarra_canvas.getContext("2d");
    pizarra_context.strokeStyle = "#000";
    pizarra_canvas.addEventListener('mousedown',empezarPintar,false);
    pizarra_canvas.addEventListener('touchstart',empezarPintar,false);
    document.addEventListener('mouseup',terminarPintar,false);
    document.addEventListener('touchend',terminarPintar,false);
    }   

function empezarPintar(e){
  e.preventDefault();
  pizarra_context.beginPath();
  pizarra_context.moveTo(e.pageX-pizarra_canvas.offsetLeft,e.pageY-pizarra_canvas.offsetTop);
  pizarra_canvas.addEventListener('mousemove',pintar,false)
  pizarra_canvas.addEventListener('touchmove',pintar,false)
}

function terminarPintar(e){
  e.preventDefault();
  pizarra_canvas.removeEventListener('mousemove',pintar,false);
  pizarra_canvas.addEventListener('touchmove',pintar,false)
}

function pintar(e) {
  e.preventDefault();
  pizarra_context.lineTo(e.clientX-pizarra_canvas.offsetLeft,e.clientY-pizarra_canvas.offsetTop);
  pizarra_context.stroke();
}
init();

Also, your css should have something like this on touch devices:

body, html {
  height: 100%;
  overflow: hidden;
}​

Upvotes: 3

Related Questions