Dessiner avec le doigt en html sur ipad?

Question

J'essaie d'écrire avec le doigt dans l'élément canvas. Cela fonctionne sur les navigateurs de bureau mais pas dans l'ipad.
J'essaie aussi avec touchstart, touchend, touchmove event, mais ça ne marche pas sur 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(); 
} 

Answer 1

Vous devez annuler l'événement par défaut (qui fait défiler). De plus, il est préférable que vous déclenchiez le mouseup/touchend sur le document car si vous laissez la zone de glissement et relâchez le bouton, le canevas ne sait pas qu'il doit arrêter de dessiner.

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(); 

En outre, votre css devrait avoir quelque chose comme ceci sur les appareils tactiles:

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