My canvas html will slide the whole page when I assign with any smartphone, but it won't happen on PC.
I want to know how to fix this problem and let my html can stop sliding.
I also want to ask, is it possible to let the image builded by this web auto save to google drive with using GAS?
*here is my code
<!DOCTYPE html>
<html lang="zh-TW">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>手寫輸入</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#canvas {}
#canvasDiv {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body id="bb">
<div id="canvasDiv"></div>
<br>
<button id="btn_clear">清除</button>
<button id="btn_submit">提交</button>
<script language="javascript">
var canvasDiv = document.getElementById('canvasDiv');
var canvas = document.createElement('canvas');
var screenwidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
var screenheight = (window.innerHeight > 0) ? window.innerHeight : screen.height;
var canvasWidth = screenwidth / 100 * 80;
var canvasHeight = screenheight / 100 * 40;
document.addEventListener('touchmove', onDocumentTouchMove, false);
var point = {};
point.notFirst = false;
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);
}
var context = canvas.getContext("2d");
/*var ptrn = context.createPattern(img, 'no-repeat');
context.fillStyle = ptrn;
context.fillRect(0, 0, canvas.width, canvas.height);
*/
var img = new Image();
img.src = "Transparent.png";
img.onload = function() {
var ptrn = context.createPattern(img, 'repeat');
context.fillStyle = ptrn;
context.fillRect(0, 0, canvas.width, canvas.height);
}
canvas.addEventListener("touchstart", function(e) {
//console.log(e);
var mouseX = e.touches[0].pageX - this.offsetLeft;
var mouseY = e.touches[0].pageY - this.offsetTop;
paint = true;
addClick(e.touches[0].pageX - this.offsetLeft, e.touches[0].pageY - this.offsetTop);
//console.log(e.touches[0].pageX - this.offsetLeft, e.touches[0].pageY - this.offsetTop);
redraw();
});
canvas.addEventListener("touchend", function(e) {
//console.log("touch end");
paint = false;
});
canvas.addEventListener("touchmove", function(e) {
if (paint) {
//console.log("touchmove");
addClick(e.touches[0].pageX - this.offsetLeft, e.touches[0].pageY - this.offsetTop, true);
//console.log(e.touches[0].pageX - this.offsetLeft, e.touches[0].pageY - this.offsetTop);
redraw();
}
});
canvas.addEventListener("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.addEventListener("mousemove", function(e) {
if (paint) {
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
canvas.addEventListener("mouseup", function(e) {
paint = false;
});
canvas.addEventListener("mouseleave", function(e) {
paint = false;
});
document.getElementById("btn_clear").addEventListener("click", function() {
canvas.width = canvas.width;
});
document.getElementById("btn_submit").addEventListener("click", function() {
$("#qmimg").attr("src", canvas.toDataURL("image/png"));
});
function onDocumentTouchStart(event) {
if (event.touches.length == 1) {
event.preventDefault();
// Faking double click for touch devices
var now = new Date().getTime();
if (now - timeOfLastTouch < 250) {
reset();
return;
}
timeOfLastTouch = now;
mouseX = event.touches[0].pageX;
mouseY = event.touches[0].pageY;
isMouseDown = true;
}
}
function onDocumentTouchMove(event) {
if (event.touches.length == 1) {
event.preventDefault();
mouseX = event.touches[0].pageX;
mouseY = event.touches[0].pageY;
}
}
function onDocumentTouchEnd(event) {
if (event.touches.length == 0) {
event.preventDefault();
isMouseDown = 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);
}
function redraw() {
//canvas.width = canvas.width; // Clears the canvas
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 2;
while (clickX.length > 0) {
point.bx = point.x;
point.by = point.y;
point.x = clickX.pop();
point.y = clickY.pop();
point.drag = clickDrag.pop();
context.beginPath();
if (point.drag && point.notFirst) {
context.moveTo(point.bx, point.by);
} else {
point.notFirst = true;
context.moveTo(point.x - 1, point.y);
}
context.lineTo(point.x, point.y);
context.closePath();
context.stroke();
}
}
</script>
<img id="qmimg" />
</body>
</html>