Boa tarde! tenho preciso de ajuda com o seguinte problema , preciso que escrever a o nome na tela com o mouse e também no celular , tenho o seguinte código que funciona para o mouse, porém para o touch se eu tocar aparece o ponto onde foi tocado, ou seja se eu dar varios toques aprece os pontos tocados, porém se eu arastrar para formar um traço ou uma palavra ele nao aparece, alguem pode me ajudar? a fazer o touch movimentar e que eu possa escrever na tela, desde já agradeçido por qualquer ajuda.
detalhe se eu tirar o comentario para travar a tela aí da mais erros ainda esse tipo:
Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
<script type="text/javascript">
var canvasWidth = 300;
var canvasHeight = 150;
var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");
$('#canvas').mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#canvas').mousemove(function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
$('#canvas').mouseup(function(e){
paint = false;
});
$('#canvas').mouseleave(function(e){
paint = false;
});
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
// Configure eventos de toque para dispositivos móveis, etc.
canvas.addEventListener("touchstart", function (e) {
mousePos = getTouchPos(canvas, e);
var touch = e.touches[0];
var mouseEvent = new MouseEvent("mousedown", {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(mouseEvent);
}, false);
canvas.addEventListener("touchend", function (e) {
var mouseEvent = new MouseEvent("mouseup", {});
canvas.dispatchEvent(mouseEvent);
}, false);
canvas.addEventListener("touchmove", function (e) {
var touch = e.touches[0];
var mouseEvent = new MouseEvent("mousemove", {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(mouseEvent);
}, false);
// Obtenha a posição de um toque em relação à tela
function getTouchPos(canvasDom, touchEvent) {
var rect = canvasDom.getBoundingClientRect();
return {
x: touchEvent.touches[0].clientX - rect.left,
y: touchEvent.touches[0].clientY - rect.top
};
}
/*
// Impedir a rolagem ao tocar na tela
document.body.addEventListener("touchstart", function (e) {
if (e.target == canvas ) {
e.preventDefault();
}
}, false);
document.body.addEventListener("touchend", function (e) {
if (e.target == canvas ) {
if( (e.cancelable))
e.preventDefault();
}
}, false);
document.body.addEventListener("touchmove", function (e) {
if (e.target == canvas) {
e.preventDefault();
}
}, false);
*/
function redraw(){
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Limpa a tela
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
for(var i=0; i < clickX.length; i++) {
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
</script>
aqui o html dele
<div class="form-group col-md-6">
<label for="inputImgAssinatura">Assine seu nome</label>
<div id="canvasDiv" class="form-control" ></div>
<input type="hidden" class="form-control" id="inp" name="inputEstado" required >
<div class="invalid-feedback">
Por favor, Preencha o campo.
</div>
</div>
</div>