How can one force a canvas to remain still while you draw on it on android phones?
We have a project in Ionic, where the below code is used to allow the end user to draw on a canvas element, but when he starts drawing, the page scrolls with him.
Strange enough though, the code stops the form from scrolling up and down if the user drags left or right, but if they move their finger up or down before going left or right, the page scrolls with their draw movements, and they end up with basically nothing being drawn...
Does anybody see how I can force the scrolling to hold while the user draw's on the canvas?
//employer_signature_canvas setup
var employer_signature_canvas = document.getElementById("employer_my_canvas");
var ctx = employer_signature_canvas.getContext("2d");
ctx.strokeStyle = "#222222";
ctx.lineWith = 2;
// Set up mouse events for drawing
var drawing = false;
var mousePos = { x:0, y:0 };
var lastPos = mousePos;
employer_signature_canvas.addEventListener("mousedown", function (e) {
drawing = true;
lastPos = getMousePos(employer_signature_canvas, e);
}, false);
employer_signature_canvas.addEventListener("mouseup", function (e) {
drawing = false;
}, false);
employer_signature_canvas.addEventListener("mousemove", function (e) {
mousePos = getMousePos(employer_signature_canvas, e);
}, false);
// Get the position of the mouse relative to the employer_signature_canvas
function getMousePos(employer_signature_canvasDom, mouseEvent) {
var rect = employer_signature_canvasDom.getBoundingClientRect();
return {
x: mouseEvent.clientX - rect.left,
y: mouseEvent.clientY - rect.top
};
}
// Get a regular interval for drawing to the screen
window.requestAnimFrame = (function (callback) {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimaitonFrame ||
function (callback) {
window.setTimeout(callback, 1000/60);
};
})();
// Draw to the employer_signature_canvas
function renderemployer_signature_canvas() {
if (drawing) {
ctx.moveTo(lastPos.x, lastPos.y);
ctx.lineTo(mousePos.x, mousePos.y);
ctx.stroke();
lastPos = mousePos;
}
}
// Allow for animation
(function drawLoop () {
requestAnimFrame(drawLoop);
renderemployer_signature_canvas();
})();
// Set up touch events for mobile, etc
employer_signature_canvas.addEventListener("touchstart", function (e) {
mousePos = getTouchPos(employer_signature_canvas, e);
var touch = e.touches[0];
var mouseEvent = new MouseEvent("mousedown", {
clientX: touch.clientX,
clientY: touch.clientY
});
employer_signature_canvas.dispatchEvent(mouseEvent);
}, false);
employer_signature_canvas.addEventListener("touchend", function (e) {
var mouseEvent = new MouseEvent("mouseup", {});
employer_signature_canvas.dispatchEvent(mouseEvent);
}, false);
employer_signature_canvas.addEventListener("touchmove", function (e) {
var touch = e.touches[0];
var mouseEvent = new MouseEvent("mousemove", {
clientX: touch.clientX,
clientY: touch.clientY
});
employer_signature_canvas.dispatchEvent(mouseEvent);
}, false);
// Get the position of a touch relative to the employer_signature_canvas
function getTouchPos(employer_signature_canvasDom, touchEvent) {
var rect = employer_signature_canvasDom.getBoundingClientRect();
return {
x: touchEvent.touches[0].clientX - rect.left,
y: touchEvent.touches[0].clientY - rect.top
};
}
// Prevent scrolling when touching the employer_signature_canvas
document.body.addEventListener("touchstart", function (e) {
if (e.target == employer_signature_canvas) {
e.preventDefault();
}
}, false);
document.body.addEventListener("touchend", function (e) {
if (e.target == employer_signature_canvas) {
e.preventDefault();
}
}, false);
document.body.addEventListener("touchmove", function (e) {
if (e.target == employer_signature_canvas) {
e.preventDefault();
}
}, false);
In your template (ionic page) you can use css to remove bounce and rubberband effects:
<ion-content no-bounce class="no-scroll"><ion-content>
in your scss:
.no-scroll .scroll-content {
overflow: hidden;
float: none;
}
Related
I'm looking for an automatic drag and dropper. First, when I click anywhere on the screen, get coordinates, then drag and drop an element with the ID of "ball". using jQuery OR javascript.
I coded a similar script to what I want, but this script got patched when the website's client got updated. This one automatically dragged and dropped when I pressed key 1(keycode 49),
(function () {
'use strict';
var mouseX = 0;
var mouseY = 0;
var invName = '';
var timer = 0;
document.body.addEventListener('mousemove', function (e) {
mouseX = e.clientX;
mouseY = e.clientY;
});
$('.inventory-box').mousedown(function (e) {invName = e.currentTarget.id;});
function drop () {
$('#' + invName).trigger($.Event('mousedown', {button: 0}));
$('body').trigger($.Event('mouseup', {
button: 0,
clientX: mouseX,
clientY: mouseY
}));
timer = setTimeout(drop, 100);
}
window.addEventListener('keyup', function (e) {
if (e.keyCode == 49 && !timer) {
invName = 'ball';
drop();
setTimeout(function () {
(clearTimeout(timer), timer = 0);
}, 20);
}
});
})();
when I click anywhere on the screen, it gets it's coordinates, then drag and drops an element with the ID of "ball"
Here's a very simple vanilla JavaScript method that will locate an element with the ID of "ball" at the cursor location upon click.
The "ball" will follow the cursor until the next click, then the ball will be dropped at the click location.
const ball = document.getElementById('ball');
const ballHalfHeight = Math.round(ball.offsetHeight / 2);
const ballHalfWidth = Math.round(ball.offsetWidth / 2);
let dragState = false;
// move ball to position
function moveBallTo(x, y) {
ball.style.top = y - ballHalfHeight + 'px';
ball.style.left = x - ballHalfWidth + 'px';
}
// listen for 'mousemove' and drag ball
function dragListener(evt) {
const {clientX, clientY} = evt;
moveBallTo(clientX, clientY);
};
// respond to 'click' events (start or finish dragging)
window.addEventListener('click', (evt) => {
const {clientX, clientY} = evt;
moveBallTo(clientX, clientY);
ball.classList.remove('hidden');
// handle dragging
if (!dragState) {
window.addEventListener('mousemove', dragListener);
} else {
window.removeEventListener('mousemove', dragListener);
}
dragState = !dragState;
});
.div-ball {
position: fixed;
background-color: dodgerblue;
width: 2rem;
height: 2rem;
border-radius: 1rem;
}
.hidden {
opacity: 0;
}
<body>
<h4>Click anywhere</h4>
<div class="div-ball hidden" id="ball"></div>
</body>
I'm making a site, where you can draw on a HTML5 canvas, with the mouse or on mobile with touch.
But on mobile you scroll the site while you are drawing. Thats make the drawing very uncomfortable.I've tried that, but it doesn't work:
canvas.addEventListener("touchstart", function (e) {
var mousePos = getTouchPos(canvas, e);
var touch = e.touches[0];
var mouseEvent = new MouseEvent("mousedown", {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(mouseEvent);
if (e.target.tag == canvas) {
e.preventDefault();
}
}, false);
canvas.addEventListener("touchend", function (e) {
var mouseEvent = new MouseEvent("mouseup", {});
canvas.dispatchEvent(mouseEvent);
if (e.target.tag == canvas) {
e.preventDefault();
}
}, 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);
if (e.target.tag == canvas) {
e.preventDefault();
}
}, false);
Do you have any idea, how I can avoid scrolling on mobile, when you draw on canvas?
Thank you!
I have problem, I can just draw in first canvas, I can't draw in second, third... canvas?
Can you help me?
App = {};
$(function() {
setDrawCanvas(0);
$(document).on('click', '#nav_steps li', function() {
var $active = $(this).attr('data-n');
var $canvas = $('#canvas_panel');
$active -= 1;
setDrawCanvas($active);
$('#nav_steps li.active').removeClass('active');
$(this).addClass('active');
$canvas.find("canvas").attr("style","display: none;");
$canvas.find("canvas:eq("+ $active +")").attr("style","display: inline;");
});
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function fitToContainer(canv){
canv.width = $('#canvas_panel').width();
canv.height = $('#canvas_panel').height();
}
function setDrawCanvas(i) {
$(document).on('DOMNodeInserted', 'canvas:eq('+ i +')', function(e) {
var canvas = $(this)[0];
fitToContainer(canvas);
App.ctx = canvas.getContext("2d");
$(document).on('drag dragstart dragend', 'canvas:eq('+ i +')',function(e) {
var mousePos = getMousePos($(this)[0], e);
data = {
x: (mousePos.x),
y: (mousePos.y),
type: e.handleObj.type
}
App.draw(data);
});
});
}
// Draw Function
App.draw = function(data) {
App.ctx.strokeStyle = color;
//App.ctx.globalCompositeOperation = "destination-out";//but tay //source-over=default
App.ctx.lineWidth = linewidth;
if (data.type == "dragstart") {
App.ctx.beginPath();
App.ctx.moveTo(data.x,data.y);
} else if (data.type == "drag") {
App.ctx.lineTo(data.x,data.y);
App.ctx.stroke();
} else {
App.ctx.stroke();
App.ctx.closePath();
}
}
when I click li, console.log is OK, but I can't draw at canvas 2 ,3 ,4 ,5... I just can draw at canvas 1.
Thank
I have a canvas that I can draw things what I want to do is generate new canvases dynamically when clicking a button.I've defined a generate function but it did not work
here is script
//<![CDATA[
window.addEventListener('load', function () {
// get the canvas element and its context
var canvas = document.getElementById('sketchpad');
var context = canvas.getContext('2d');
// create a drawer which tracks touch movements
var drawer = {
isDrawing: false,
touchstart: function (coors) {
context.beginPath();
context.moveTo(coors.x, coors.y);
this.isDrawing = true;
},
touchmove: function (coors) {
if (this.isDrawing) {
context.lineTo(coors.x, coors.y);
context.stroke();
}
},
touchend: function (coors) {
if (this.isDrawing) {
this.touchmove(coors);
this.isDrawing = false;
}
}
};
// create a function to pass touch events and coordinates to drawer
function draw(event) {
var type = null;
// map mouse events to touch events
switch(event.type){
case "mousedown":
event.touches = [];
event.touches[0] = {
pageX: event.pageX,
pageY: event.pageY
};
type = "touchstart";
break;
case "mousemove":
event.touches = [];
event.touches[0] = {
pageX: event.pageX,
pageY: event.pageY
};
type = "touchmove";
break;
case "mouseup":
event.touches = [];
event.touches[0] = {
pageX: event.pageX,
pageY: event.pageY
};
type = "touchend";
break;
}
// touchend clear the touches[0], so we need to use changedTouches[0]
var coors;
if(event.type === "touchend") {
coors = {
x: event.changedTouches[0].pageX,
y: event.changedTouches[0].pageY
};
}
else {
// get the touch coordinates
coors = {
x: event.touches[0].pageX,
y: event.touches[0].pageY
};
}
type = type || event.type
// pass the coordinates to the appropriate handler
drawer[type](coors);
}
// detect touch capabilities
var touchAvailable = ('createTouch' in document) || ('ontouchstart' in window);
// attach the touchstart, touchmove, touchend event listeners.
if(touchAvailable){
canvas.addEventListener('touchstart', draw, false);
canvas.addEventListener('touchmove', draw, false);
canvas.addEventListener('touchend', draw, false);
}
// attach the mousedown, mousemove, mouseup event listeners.
else {
canvas.addEventListener('mousedown', draw, false);
canvas.addEventListener('mousemove', draw, false);
canvas.addEventListener('mouseup', draw, false);
}
// prevent elastic scrolling
document.body.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false); // end body.onTouchMove
}, false); // end window.onLoad
function generate(){
var newCanvas = document.createElement('canvas');
newCanvas.width = 400;
newCanvas.height = 400;
document.getElementById('container').appendChild(newCanvas);
ctx = newCanvas.getContext('2d');
}
//]]>
here is jsfiddle http://jsfiddle.net/regeme/WVUwn/
ps:drawing not displayed on jsfiddle however it works on my localhost I have totally no idea about it , anyway what I need is generate function , I did but I think I am missing something..
Any ideas? thanks..
Below is a function I wrote to dynamically create canvas.
If the canvas already exists (same ID) then that canvas is returned.
The pixelRatio parameter can be defaulted to 1. It's used for setting the correct size on retina displays (so for iPhone with Retina the value would be 2)
function createLayer(sizeW, sizeH, pixelRatio, id, zIndex) {
// *** An id must be given.
if (typeof id === undefined) {
return false;
}
// *** If z-index is less than zero we'll make it a buffer image.
isBuffer = (zIndex < 0) ? true : false;
// *** If the canvas exist, clean it and just return that.
var element = document.getElementById(id);
if (element !== null) {
return element;
}
// *** If no zIndex is passed in then default to 0.
if (typeof zIndex === undefined || zIndex < 0) {
zIndex = 0;
}
var canvas = document.createElement('canvas');
canvas.width = sizeW;
canvas.height = sizeH;
canvas.id = id;
canvas.style.width = sizeW*pixelRatio + "px";
canvas.style.height = sizeH*pixelRatio + "px";
canvas.style.position = "absolute";
canvas.style.zIndex = zIndex;
if (!isBuffer) {
var body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);
}
return canvas;
}
Change the jsfiddle option
"onLoad"
to
"No Wrap - in <body>"
EDIT: See also similar question over here: Uncaught ReferenceError for a function defined in an onload function
JSFiddle options: http://doc.jsfiddle.net/basic/introduction.html#frameworks-and-extensions
This is the working update of your JSFIDDLE
javascript:
document.getElementById('generate').addEventListener('mousedown', generate, false);
I guess this is what you want.
I've just added an eventListener to your button in javascript code itself.
P.S.: I've also added black background color to canvas to show it on white background.
im learnig javascript and try to develop a page to draw on. Change colors and linewidth are already in place. Now it is drawing, but just when I move the mouse. I'd like to add also on click on just on move. So I'm able to draw also points. I have put the drawCircle function in the function stopDraw, but this is not working as it should. Any ideas?
Second problem is that, I'd like to draw a circle without stroke. But as soon as I change the lineWidth, also my circle gets a stroke around. Please help...
// Setup event handlers
cb_canvas = document.getElementById("cbook");
cb_lastPoints = Array();
if (cb_canvas.getContext) {
cb_ctx = cb_canvas.getContext('2d');
cb_ctx.lineWidth = 14;
cb_ctx.strokeStyle = "#0052f8";
cb_ctx.lineJoin="round";
cb_ctx.lineCap="round"
cb_ctx.beginPath();
cb_canvas.onmousedown = startDraw;
cb_canvas.onmouseup = stopDraw;
cb_canvas.ontouchstart = startDraw;
cb_canvas.ontouchend = stopDraw;
cb_canvas.ontouchmove = drawMouse;
}
function startDraw(e) {
if (e.touches) {
// Touch event
for (var i = 1; i <= e.touches.length; i++) {
cb_lastPoints[i] = getCoords(e.touches[i - 1]); // Get info for finger #1
}
}
else {
// Mouse event
cb_lastPoints[0] = getCoords(e);
cb_canvas.onmousemove = drawMouse;
}
return false;
}
// Called whenever cursor position changes after drawing has started
function stopDraw(e) {
drawCircle(e);
e.preventDefault();
cb_canvas.onmousemove = null;
}
//Draw circle
function drawCircle(e) {
var canvasOffset = canvas.offset();
var canvasX = Math.floor(e.pageX-canvasOffset.left);
var canvasY = Math.floor(e.pageY-canvasOffset.top);
//var canvasPos = getCoords(e);
cb_ctx.beginPath();
cb_ctx.arc(canvasX, canvasY, cb_ctx.lineWidth/2, 0, Math.PI*2, true);
cb_ctx.fillStyle = cb_ctx.strokeStyle;
cb_ctx.fill();
}
function drawMouse(e) {
cb_ctx.beginPath();
if (e.touches) {
// Touch Enabled
for (var i = 1; i <= e.touches.length; i++) {
var p = getCoords(e.touches[i - 1]); // Get info for finger i
cb_lastPoints[i] = drawLine(cb_lastPoints[i].x, cb_lastPoints[i].y, p.x, p.y);
}
}
else {
// Not touch enabled
var p = getCoords(e);
cb_lastPoints[0] = drawLine(cb_lastPoints[0].x, cb_lastPoints[0].y, p.x, p.y);
}
cb_ctx.stroke();
cb_ctx.closePath();
//cb_ctx.beginPath();
return false;
}
// Draw a line on the canvas from (s)tart to (e)nd
function drawLine(sX, sY, eX, eY) {
cb_ctx.moveTo(sX, sY);
cb_ctx.lineTo(eX, eY);
return { x: eX, y: eY };
}
// Get the coordinates for a mouse or touch event
function getCoords(e) {
if (e.offsetX) {
return { x: e.offsetX, y: e.offsetY };
}
else if (e.layerX) {
return { x: e.layerX, y: e.layerY };
}
else {
return { x: e.pageX - cb_canvas.offsetLeft, y: e.pageY - cb_canvas.offsetTop };
}
}
Your drawCircle function is wrapped in the canvas's onclick event. It should be
function drawCircle(e) {
var canvasOffset = canvas.offset();
var canvasX = Math.floor(e.pageX-canvasOffset.left);
var canvasY = Math.floor(e.pageY-canvasOffset.top);
cb_ctx.beginPath();
cb_ctx.lineWidth = 0;
cb_ctx.arc(canvasX,canvasY,cb_ctx.lineWidth/2,0,Math.PI*2,true);
cb_ctx.fillStyle = cb_ctx.strokeStyle;
cb_ctx.fill();
}
So you'll have to pass the event object from stop draw as well
function stopDraw(e) {
drawCircle(e); //notice the change here
e.preventDefault();
cb_canvas.onmousemove = null;
}
Note that you're also setting you circle's radius to 0 which might be another reason why it's not showing up.
cb_ctx.lineWidth = 0;
cb_ctx.arc(canvasX,canvasY,cb_ctx.lineWidth/2,0,Math.PI*2,true);
0 divided by 2 is always zero. If you don't want to stroke around the circle just don't call stroke(). the drawCircle function isn't causing that, since there's a beginPath() call. I suspect it's because you don't beginPath() before calling stroke() in drawMouse.