how to handle touch on smartphone's browsers - javascript

how to handle touch on smartphone's browsers - javascript - javascript

I want to handle touch listener on smartphones.
my codes works fine with mousedown,mousemove,mouseup,mouseout on web browsers.
canvas.addEventListener("mousedown", function(event) {
event.preventDefault();
var p = get_mouse_position(event);
for( var i=0; i<4; i++ ) {
var x = points[i][0];
var y = points[i][1];
if( p.x < x + 10 && p.x > x - 10 && p.y < y + 10 && p.y > y - 10 ) {
drag = i;
break;
}
}
}, false);
canvas.addEventListener("mousemove", function(event) {
event.preventDefault();
if(drag == null) { return; }
var p = get_mouse_position(event);
points[drag][0] = p.x;
points[drag][1] = p.y;
prepare_lines(ctx2, points, true);
draw_canvas(ctx, ctx1, ctx2);
}, false);
canvas.addEventListener("mouseup", function(event) {
event.preventDefault();
if(drag == null) { return; }
var p = get_mouse_position(event);
points[drag][0] = p.x;
points[drag][1] = p.y;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx1.clearRect(0, 0, canvas.width, canvas.height);
var s = (new Date()).getTime();
op.draw(points);
document.getElementById("ms").innerHTML = ( (new Date()).getTime() - s );
prepare_lines(ctx2, points);
draw_canvas(ctx, ctx1, ctx2);
drag = null;
}, false);
canvas.addEventListener("mouseout", function(event) {
event.preventDefault();
drag = null;
}, false);
canvas.addEventListener("mouseenter", function(event) {
event.preventDefault();
drag = null;
}, false);
like this demo:
http://www.html5.jp/test/perspective_canvas/demo1_en.html
https://github.com/wanadev/perspective.js/
but my codes doesn't work on smartphone's browsers.
I added touchstart,touchmove,touchend listener like same codes on click listeners. but on smartphone's browsers my edges dosn't move at all.
touch listerns:
canvas.addEventListener('touchstart', function(event){
event.preventDefault();
var p = get_mouse_position(event);
for( var i=0; i<4; i++ ) {
var x = points[i][0];
var y = points[i][1];
if( p.x < x + 10 && p.x > x - 10 && p.y < y + 10 && p.y > y - 10 ) {
drag = i;
break;
}
}
}, false);
canvas.addEventListener('touchmove', function(event){
event.preventDefault();
if(drag == null) { return; }
var p = get_mouse_position(event);
points[drag][0] = p.x;
points[drag][1] = p.y;
prepare_lines(ctx2, points, true);
draw_canvas(ctx, ctx1, ctx2);
}, false);
canvas.addEventListener('touchend', function(event){
event.preventDefault();
if(drag == null) { return; }
var p = get_mouse_position(event);
points[drag][0] = p.x;
points[drag][1] = p.y;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx1.clearRect(0, 0, canvas.width, canvas.height);
var s = (new Date()).getTime();
op.draw(points);
document.getElementById("ms").innerHTML = ( (new Date()).getTime() - s );
prepare_lines(ctx2, points);
draw_canvas(ctx, ctx1, ctx2);
drag = null;
}, false);
I want to handle 4-edges on smartphone's browsers like web browsers. but I can't move 4-edges on smartphone's browsers.

A TouchEvent might be composed of multiple Touch objects (a.k.a multitouch).
These different Touch objects are available through the .touches TouchList property of the Event.
Only these objects will hold the coordinates you are interested in, and thus, in your handler, you need to pick one of these Touch object, this is generally the first one (single-touch application).
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
// attach all our handlers
canvas.addEventListener('mousedown', handleDown);
canvas.addEventListener('touchstart', handleDown);
document.addEventListener('mouseup', handleUp);
document.addEventListener('touchend', handleUp);
document.addEventListener('mousemove', handleMove);
document.addEventListener('touchmove', handleMove);
var mouse = {
lastX: null,
lastY: null,
x: null,
y: null,
down: false
};
// Here we want to check whether it is a touch event or a mouse event
function update_coords(evt) {
evt.preventDefault();
var ev;
// touch event?
if (evt.touches && evt.touches.length) {
ev = evt.touches[0];
} else ev = evt; // mouse
var rect = canvas.getBoundingClientRect();
// update our mouse object
mouse.lastX = mouse.x;
mouse.lastY = mouse.y;
mouse.x = ev.clientX - rect.left;
mouse.y = ev.clientY - rect.top;
}
function handleDown(evt) {
mouse.down = true;
update_coords(evt);
draw();
}
function handleUp(evt) {
mouse.down = false;
mouse.lastX = mouse.lastY = mouse.x = mouse.y = null;
}
function handleMove(evt) {
if (mouse.down) {
update_coords(evt);
draw();
}
}
function draw() {
if(mouse.lastX === null) return;
ctx.beginPath();
ctx.moveTo(mouse.lastX, mouse.lastY);
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
}
canvas{
border: 1px solid;
}
<canvas id="canvas" width="500" height="300"></canvas>
To test on a mobile device, please switch to the full site version of Stackoverflow (at the bottom of the page) or try this fiddle.

Related

Get image data from canvas

I'm trying to add a signature feature to a web app. Users should have the possibility to sign with a pencil on a touch screen device. I'm using HTML5 canvas, JavaScript and PHP to get things done. I found a script for both mouse and touch support.
The drawing on the canvas works fine. When I submit the form, the scribble will get cropped properly (so it seems). But the generated base64-png data (saved in a database) is an empty image.
Here's the JS code I'm using:
var canvas, ctx;
var mouseX, mouseY, mouseDown = 0;
var touchX, touchY;
var lastX, lastY = -1;
canvas = document.getElementById('scribble-canvas');
ctx = canvas.getContext('2d');
canvas.addEventListener('mousedown', scribbleMouseDown, false);
canvas.addEventListener('mousemove', scribbleMouseMove, false);
canvas.addEventListener('mouseup', scribbleMouseUp, false);
canvas.addEventListener('touchstart', scribbleTouchStart, false);
canvas.addEventListener('touchend', scribbleTouchEnd, false);
canvas.addEventListener('touchmove', scribbleTouchMove, false);
function drawLine(ctx, x, y, size) {
if (lastX == -1) {
lastX = x;
lastY = y;
}
ctx.strokeStyle = "#000000";
ctx.lineCap = "round";
ctx.lineWidth = size;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.stroke();
ctx.closePath();
lastX = x;
lastY = y;
}
function scribbleMouseDown() {
mouseDown = 1;
drawLine(ctx, mouseX, mouseY, 3);
}
function scribbleMouseUp() {
mouseDown = 0;
lastX = -1;
lastY = -1;
}
function scribbleMouseMove(e) {
getMousePos(e);
if (mouseDown == 1) {
drawLine(ctx, mouseX, mouseY, 3);
}
}
function getMousePos(e) {
if ( ! e) {
var e = event;
}
if (e.offsetX) {
mouseX = e.offsetX;
mouseY = e.offsetY;
}
else if (e.layerX) {
mouseX = e.layerX;
mouseY = e.layerY;
}
}
function scribbleTouchStart() {
getTouchPos();
drawLine(ctx, touchX, touchY, 3);
event.preventDefault();
}
function scribbleTouchEnd() {
lastX = -1;
lastY = -1;
}
function scribbleTouchMove(e) {
getTouchPos(e);
drawLine(ctx, touchX, touchY, 3);
event.preventDefault();
}
function getTouchPos(e) {
if ( ! e) {
var e = event;
}
if (e.touches) {
if (e.touches.length == 1) {
var touch = e.touches[0];
touchX = touch.pageX - touch.target.offsetLeft;
touchY = touch.pageY - touch.target.offsetTop;
}
}
}
function crop(canvas) {
var w = canvas.width, h = canvas.height;
var pix = {x:[], y:[]};
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var x, y, index;
for (y = 0; y < h; y++) {
for (x = 0; x < w; x++) {
index = (y * w + x) * 4;
if (imageData.data[index+3] > 0) {
pix.x.push(x);
pix.y.push(y);
}
}
}
pix.x.sort(function(a,b){return a-b});
pix.y.sort(function(a,b){return a-b});
var n = pix.x.length-1;
w = 1 + pix.x[n] - pix.x[0];
h = 1 + pix.y[n] - pix.y[0];
var cut = ctx.getImageData(pix.x[0], pix.y[0], w, h);
document.body.style.opacity = 0;
canvas.width = w;
canvas.height = h;
ctx.putImageData(cut, 0, 0);
return canvas.toDataURL();
}
On the PHP side I just pick the data returned by the crop() function and save it to the database.
What I tried so far is to strip off the touch support to see if it works just on mouse devices.
Additional code as suggested by user traktor:
The following jQuery code submits the form with the image data to the PHP script:
$(document).on('click', '#scribble-submit', function(e) {
e.preventDefault();
var btn = $(this);
var data = crop(document.querySelector('#scribble-canvas'));
$.post('/scribble/ax/ins_scribble', $('#form-scribble').serialize() + '&data=' + data, function(ans) {
window.location.href = '/' + btn.data('redirect');
});
});
The PHP part looks like this (using the CI3 framework):
$post = $this->input->post();
$this->db->where('id', $id);
$this->db->update('personen', ['signatur' => $post['data']]);
echo TRUE;
So far, jQuery and PHP works fine. The data is successfully inserted into the database. The LONGBLOB field contains this code:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAAC3CAYAAABNEPEEAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAxKADAAQAAAABAAAAtwAAAAB1wSLaAAAYVElEQVR4Ae2dCZQeVZXHmyUhIYQ1gBAgHSDsCAxbWNPsO4ZBBBkwERxQcEARUUdQdJyj6DjA0VE2YdhBhs2ASAhDwo4gy4GwBmggILIZgbAKM79/893O7er1W r7arn3nH /W reu/ef71Xb63qhdpCssbAMhg0CowBoyuh4iaDYeAeUI0szcnt4P9AJ/gbGEiGer6dN5/EZoG7wGvgzyC3slBuLe9tuArRSGAFSjdsCWA3bmv0RcFsMFih4JRuWQVNUIGaC14E1YpsWA8sAp4DSmtxsGQlXKoSynbFy 48yrsY/VfwPHgDqLKsAN4G/wVuAJmWVlUIFYC9we5AN78TJAvpROJUcPp7IlpBVwFSQV8ebABCssvAFzDtwuya19aWZoVYGceXBWPBumAXoEKsp8Z4sBoYDkL6Z AFfnoJPANWAu B/h4Q/NSn2IMjrS6TunXLgTXAYC2bWtf/BTeCaeBNkClpZIVYGM9EyilAXYyRoFVPbBWieeDlSvgB4afAh2A2SLZGRPUrjewyfUQufwQq6OpGqIvhQxV4HVsou/MievipQowB6goqVHnYAWwC1HXycg4Hvwb3 8hW6/VWiHE4sBFYC6wH9gbqugxVHuDE50AnSBbSicQN1mVS/ipUtwEVNPVbld7HICQ7DKgFOQkcmzDpKY6fANcCVZDcip4AVwENnlRo 8M7/Canp4PbwXXgSLAlEEkh5WFgPK7uB84CyfKibuAIkEuZjNV3AjX/Scfs Ap U8uhZjQkGPAMqFulnoTGE1ZeFP4eHAByI8OxdEdwA/COSL8UfA3sDDT9GRIMDMbAlzlBPYdXgZUnTR5MApmX1bDw6 A YMYrVK0OCQbqYeBfuNiXKc1CfgNktku9Lcb9DmiGxgx/EP1woBmYkGCgHgZW5eKDgR6uVr7sYauylzlJGipjJ2XOyjAo7wzshAO QkifAZbKkmMrYoymxczQu9HXz5KBYUuhGNgcbzQbaeVNocYai4GWywpYcDzwgx7NHIUEA2kysB2JPwx8pTgqzQyHmrb6b96oY4Z6YZwXDNTJwIZc/9/Ayp/WuzYGLZVvk7sZpMW1kGCgmQzsQGZW/hQ ALQG1hLR2EEbsMygE1piRWRadgb2hYCbgZXDa9C1s7mpYmOHl8nVDFm7qRZEZsHAAga iGrlUOFdQFP TZPPkpM3IMYOTaM MuqDAe2BOg68BqxcXt/HealFaQOeZawZppBgIAsM3IQRVi470XdvllHaeWgZq3KEBANZYOAIjHgMWNl8E33dtA0bSwbqo1mm/5R2hpF MFAFAxtwru86nVjFtTWd2sFVflv3hJpSiYuCgfQYUCWwB7YqhypJKjKCVH8ILDNt6AsJBrLGgLpJ6i5ZOX0cXd2phss4UtR dMtIc8AhwUAWGdCAuhNYWU3l4a1MLIMP0UOCgSwzoKlXK6 z0dsbYezCLpFxTo/ZJUdGqJlkQBXi7Ypl sDFXo228uckaDXuB41OPNILBlJg4GjStDL7CnpHvXn4FkI7DE003xsSDGSdAbUSeoFNsjzYvEtrwJ/9ScO/97BOA9KMJIKBZjDwTTKxVkIPcr22ULdcQAqW6Bz0JetOMRIIBprDQAfZ GlYleW65QZSsApxed2pRQLBQHMZuJDsrPyqcnTUmr2NIfQtUZN7TYkwGMgJA2dipxboJKNBzWMJqxCjupL65M9sp4caDOSBAX2Y4FxnaAd6uzsesqoKIWjPuUnyo8MWH2EwkGUG1LPRxJBkT7BXl1bDHw2g/aBkzRrSiEuCgSwwcDRG2FiipnUJtQ6LAfW7TGz1z44jDAbywsD1GFr3uoS6S1arFNq4Ii8khJ3BgGeg7nUJLcJZhXjDpxx6MJBDBjqw2Q8BLqjWh824wCrEC9VeHOcHAxlkoOZ1CXWPRjiHooVwZISaWwZqXpdQhRjl3J7v9FCDgbwyUPO6hCrESOf1PKeHGgzkmYF7Mf7VigNVrUvoyxo2hrgizwyE7cFAgoGjObayPaR1CbUQi7tE3nJ6qMFA3hmoel1CFWI95/USTg81GMg7A504MNM5cRj6gO9LqEKs5S5YxumhBgNFYEBjCev5aM1t6kBOqUIs4k7QR8pCgoEiMTATZ6Y5h7ZHX90d91BVIea6GK 76FCDgVwzcB7W/6Xigb5G2V7RewVRIXpREhEFZGAGPs1yfv2D03uoqhAhwUAZGNBYwmRzU5JhVIgkI3FcVAbud47pA8n6RmwviQrRi5KIKCgDnfh1R8U3LTX0Of0aFaLCUASFZ0Af8j7feTkFfXV33KVGhUgyEsdFZkCb/p6qOLgN4cSks1EhkozEcZEZ0Jf93nEOHuz0LjUqRJKROC46A36tbZWks1EhkozEcdEZuMQ5OAq9x2xTVAjHTqilYOBuvLTZpjXRe8w2RYUoRRkIJx0DA842RYVwTIVaGgY02/RoxVvNNrVX9PgGkxERYakY0GzTI87j7r1N0UI4VkItFQN97m1atFQUhLP9MTCMH8aD5cFOYFMwHGiK8kWwNLA3K19H14tk hcK2kF6MXgF5E383qZJGL8z0K7YtpOBvYgtPaQcDCyOm uDq8AD4AVg5aCaUF/JUxp5k9Ux Elgvp4nB9RCjJVSEa9bXITFYGAcbuj at59QgW7EPoPXXNYtej6/cCz4Aygp wTIOsfzdZs05 AuJB0lX1VCL9a5/Wus JP7hnYEw9UYDVw7B489uPVXOJfA/pgnd5D1vGLoK8u03LEq4UZCSTt4CdSkGuA8sy6aE3ioIqRqgtdok91WLMxvRIXQb4ZaMd83egfAz2t7f72FX7A778Fa4BhoBoZw8lXgmS6HxOnSpH1r7hs72zXrFPX9wVOc5GXoofklwEVaG1Y0/9ISBZSHWsgfCc4BajCbAG6CgFhraJCr0H4t8CzwOer CyLXhTy9nZV4CNdpD4SG5IvBlbFXBVutfR6ynUCf5NNP4P47UDa8iwZWJ6qJFkWzZaZrQq7hgxfcJEXZ9n6sK0HA q7bwZ CvxN9fq5/PZ5oL5 s0SVwGx4tlmZ1piPxg1/cfZ2faPssy7i6hoTjsuax8DWZHU4 BV4Gljh8 HpxGsdoRWibpK35QaONT7JqszBMLNXXci2vV3EDEWEZJKBXbHqIvAUsBvow07irwN7ALUerRL1w/Vg1cDa7JvSKmOGkK/GVGZnh87fwUXcoYiQTDGwJdZ8GWhl1W5cMtw9UxZ/Ysx9zl5V1G0yaKNM gMwPicrYisX8YgiQjLBwCismATUKtgNs3AucRo77AtGgCyKCtczwNush2/W5BIMMhsPkXEbuQj1SUNay4BmjfTE/wl4EtjNsvA84nTP8iC7YKTZrVAzYVkTde/Mxp/JuHVcxOuKCGkZA0uS8zRgN8jCF4g7FaiA5Um0m3o6MD86M2i8xs1mn7p2bXoiWcQ76K0ckMmesoq6GBrgfQTsfliobm1eZR8MNz8Ufh10LYBlxCHNgpl90ttWcBH6YVlFhjSNgeHktCPwN0b3Qa3CEWApkGdR4VclsEKnUJUkK3I2hpht0rtqq0UonKDIkKYwsBq5qLD4GRndA3UziiadOGTlrKtrkhEHT3Z2nayVuvfBa2AMkGh2IyR9BnYli68CrRvoPkgeAr8AN qgYDIbf8ZVfFKvJJOiQc H4BVn3XJODzUdBjpI9iSgroNVBtS2Y8FvgKZViyb JSK1FN7vzPiqCiF57pOg669mOkLSY0CV4HSwrcviHvQNwCwXVzT1fueQtki0u PMqFYh3nUWre30UBvHgHidWsGnXbKa9lO8uhRFlkdx7lnnoNZZMifWbPmp1sHeqsqcEzkxaE/s/M ErcdxrPWFMojGqk A8RVnMzlWtQrxV3dHbHDtokKtg4GjufYzQAugXjTDpKnVMom6hrtXHJaeObEu00xn2YpOD7U Bjbi8ilAK8xaAJVoilWLcGWrDPI982ItxO3O0rXQlwevurhQq2NgLKerVdgfbOwu1bTq5u64bOpE57DXXXRrVasQWof4G1gKKG40iAoBCTWI1he AtQ1GFG5/i3CO8FFleOyBppuNfG6xbUiXNpl6vUeW3W3dCeFOjQG1LIeCNQ31s322I/jkLa20yDBeJGeBfGbD6dbCyHDngc2A6CWIqQ6Bk7ldM0kedF44Shwr48ssd7ufPe6i266Osrl IENqhX3uvtBY4iQoTGgbQjXgj0Sp1/G8aEgKsMCYnw3yesLzmi Nt9lOc23EC 7H2LHqyNjEFUVYV93zlPo3wVXuLhQP2Gg0xHhdRfdVFU9IesVKeMHfYXQwNok1iKMiYFDDZy1J8lETxuNJUJ6M6CWdH0Xva7TW6VuRsafcpnP6a/LJONDBmZAlUErz2u402Y5PdSeDGzPoX/jz28X6nlm845UKZeoZKdurx82dH3QymYAfts8m3KZk/Yi3QKML4UvAb9hj8OQCgPthNrLZHy9U4lvZaClhQucTV9KGqO sBl8R/LHOO5mQC3DzcC4Uvg08N0BDkMcA1PRPV/a09RqaceAj4DZ1WsPn/pT9uNj6CG9GeirZRBXURl6c VjpnJgZUthFl6A6nA2aeG0S/yg k2LJFS/WH2rt11c2VVVBn0YusMRcSv63qCbUPdbqAsYmIn6S7AmeA9cD1otKzoD7nJ6t6pla1 LN n JRSNDW5J8BMtQ77LxQnufp5prvhZJrUGfuywkp1U8nAM/h8LOhwPP0ffAsx2caHmiwFtvzfR2lGfog1o1kpc3ecZ5YucgsvzHC Po2uGIiTfDFyD VbWu/ea RZC7vnV6lXy7W9DrF GVDR3rhVNyYNA8 kxZhAb RXdTz8RoinzPmU7Yq3WaGpMBaKsohXnE8EzwDjZtaxkFMzvg/FHg3u7r8v155/2dWi2yU70 zz6u6ao8Qc6HsTHd4C1FEX1uSx XYGjVsbvH8zpOe5kza6UUdQS3AOMtBllJKGgPm NXxpE2709ZzA/f 9OnjzYyQX8Xa3A5Y4DEXdAAf0sq0uHu3s7F30jT0RyUK3f/MB6ZX9ySXS1Djs4Xy9DVxMbkn8GRuLCps6NS9AfcsdtfVUI1RoTvzXW4ooeamJh YqTWmf4YdEdLpF/mlnazfl7u9O71L4qxEvupLK1EIfi 1bOf1UGrUiH5J BVXHhc2B158p0p/er7s8vNuAo02ByS/x 0vmu5tSvZnIYkmMGOrDdyrVC7VoekkzkLLvwYfSFhnRV/k/Sa5/m98f5dyc8SDDg9y7dmfit 7CvLtMb3b9 8kVq60 76MKpG PRPs4rVY6Q4jAwDFe2du5c5fRB1VGcMQ/Y0/KQQa/I9wmbYP6vwPvAfB6Xb5fC gQDB3Ps1x56TLUmzu3z8FZirXCoL11kOQznzNe30PcqsrMl9K0dn/3a2ukca/q1Kjmbs62QdKKvV9XV Tl5V0y9D5ivg65a5se1sLTCwEHu/uo D6 FGS1M6evUVlA U0siGb9mEey7yPkoX/fIuM1hXvUM/JhLrByfW/3lC644yyX07wuiC6N14MnTwMg6vzCehSPGgD4tql3bdo8/bz/UEv6zS6jPd05rSTRD13zV deJvmGGbAtT6mdAuyyuBFYZFGqlumZRAbHE5qNrwa4osjKOqEUw/75fFMfCj24GjkDTa9F2j8/s/qVGZTTXneISvBl9yRrTytplGhNpRsnI2ilrBoY9dTGg7Rm/A3Z//4S Tl0pVi5em/AjYAkf24hEW5yGFuEudz5d2mJ7IvvGMrAFyWlq9TVg5XbbRmah2mUJX93IhFuUlgZW5s/z6EWdUm4RvS3P9hh3fz9E/yIY8lTrwkMw/0V3zopOz6O6GEZrE5/JdJRH7SDC3DOgWaWdnRdaVzoPfODi6la/TQr2RM37VuhN8eVx58/n6mYnEsgKA7q3GudaWdWAelIaxq3rMnkHfZ80MmlCmuPJ4z AEaZwiSbkG1mkz4Ame74H/L3VTGIqsgypPgAss0tSySX9RHdzPsiXIe HT9 0yKFOBrT/zG/eU VIVfzepvfI6degPdUcG5/490nSKrWa1pBiMKAey03A7q1CLcqlKpq2ehn4TKemmmNjE1 J5PwT5KjGJh ptZCBU8nbyuW96NrO3xS5llwsY4VTm5JrYzLRCyF6C87sb29MspFKCxlYjby1/eZ YPdVq9N1yaJVXD2Nc1WoRgI9bWeCPMg4jNwMLFQx9jLCzooeQX4Z0H/8 YUz/1z0Ge441H4Y2Jd4e4IoDMk/A/ IC3cBu695Xw5o6h053hF3aVNzjszSYEAtwyxglUHhoWlkVMQ0tRKvptTI 1oRnSyRT1vj62nufuq XlEi/ t2dQIpPAmsQvhl/boTjwSaysD25HY9sHup8BbQ0I17pFdo0e7cvwMjcVShvS2uc7vg2lnuPup /gwMAyFDZGAc52le2irDkUO8Lk7LFgPasPcwsPuo8ERgs4aoIUNhIGaXhsJSts ZjHnJD0EclG2Ts2tdzC5l994MxbIDOEmbSX3LoC5wqlLNwlyqhjQ4cc0u Rd/7mlw pFcegy0k7QGylpr0CKwibZ3a1U6pAYGYnapBtIycslh2OFbBemKC6mDgZhdqoO8Fl2q926 Am4EvkKMaZE9hcl2HJ7E7FL bucxmOwrwlscxxuNDbiP30wQ24AkI4kUGdBWDN2z24BViD nmF/pkvbb1GMQlv3brzUFqwgKHwJae2iJFHGWabRjcq7TQ80WA9tgzm5gb2fWneiKD2kgA38gLXvi/FsD042kGsfAMiTlv5Ch 3UdmNS4LCIlY8BXCD2BQrLDgGaMpoD7wEfAHlyXo4ekxMCjpGtEb5FSHpFs9QxswCX/CjRgtvuj8C6gRbeQFBhYnTT9xxBWTSGPSLI6Btbi9APBOcBXBOnqJoWkyMBE0jbS9f73kinmFUkPzoDGCslZJN2fS8GuYGkQkiIDU0jbKsQdKeYTSQ/MgI0VLua0Z4DdE4XHAb9HicOQtBjQrJKR/6O0Mol0B2Sgv7HCDK7SDtaQJjGgt6f B1iF0G7JkOYxMNBY4TvNMyNyMgaWRXkdWIXQloCQ5jAQY4Xm8FxVLnr/wSqDQrUYIekyEGOFdPmtK/WtuNoqxJy6UoqLh8KAvp6uLuo8YLwrjLECJGRB9P6t3RjtiQlpPAPDSVLTpSeA5Iv/4j73Y4Uibe6bwA0xedWUCBvGwIaktCOYCjYGXh7k4Fvgjz4y9NYycD3ZWwtxa2tNKUzuvkW40vFrPCs8G6xTFI L1EL4QfR7RblBLfRjoBZhJnZp28Ud4G5QGClShdCmvl0qd0Z6SPUMqEXoAOoSbQn6WsuZSvxVQK94Fk6KVCHmubvjdRcd6gAMlLJFSPJRpAqR9C2OB2dALYK dLETGAc DZIylYjCtghJZ6NCJBkpz7G1CHrBf2zC7ZkcF3KMkPCz12FUiF6UFDqi9GOEwe5uVIjBGCrO79YiTMUlDZq9aGV/NpgGzvc/lE0vUoXwzb7Xy3ZPvb/RIng2hqAXqUKs4vz1uosulTpQizATJko5RhisBBSpQnzgnF3C6WVSo0Uo090exNeT N22FOjbrmWTvXD4YvAcMB4svIW4bwC9cx5SEgb0yRkrAE g64WhIov82wR8CfwSPA3Mfx9OIX40CCkZA PxV3uYrDAkZ1KKQoe6RRoffA94f81vhZo1ihYBEsouj0CAFYxb0IvSRdDndLSafBTQf N8CpifPpxP/BlgfRASDLRdDQf6HpMVklkF4GQPfDgdvOT8Mv8UaszwU6AxxBogJBjowYAqgRUYVY77wOQeZ2T3YASm6eMIGhfo/Y6HgMZD5k8yPIDfQoKBARlQN0mVwrcUz3CsreELgyyKFhIPAb8BL4Bkwbfjm/jte0CtRnzsCxIaLQs1OsEMpXcDtuhFeC8zONCClLYpqOC9AV4FzRR9b3YloLfM1MVZE2wOVgOLgb5EXcHvgsf6 jHiGsdAkSuECtu2QN0K9a/7kueJfB10gjOB unqovhFPg5rFj3FVQGWA5uCbcCEik7QrzzOL 8C2SO7bgPxjgckpC1FrhDGnQrh5WCsRQwSvs3vmtNXRVEhHAPeB3oLr69CqXRXAZoO1bWqTCuApcDKQDNE/T35 amH/Iij88GcHrFx0DQGylAhROYOQPPyS4M3gQrwSkCFvRXydzLVgPn2SqgK CCQbSEtZKAsFaIvilUp1J05HuhJLi70HnEaMp9E9dRXq6MB/oUgvgwCCVmTMleI5L1Qt2Y0sO7Oiujq73eAYWCwLpOe hqsa5pXT3oV/rcqoSrEeyAk4wz8P tCAtne45WMAAAAAElFTkSuQmCC
Using this data as an image source for the img tag results in the empty image.

The problem is this jQuery line:
$.post('/scribble/ax/ins_scribble', $('#form-scribble').serialize() + '&data=' + data, function(ans) {
Combining the serialize function and an addition of &data= didn't work. So I changed it to:
$.post('/scribble/ax/ins_scribble', { data: data }, function(ans) {

You code runs fine:
var canvas, ctx;
var mouseX, mouseY, mouseDown = 0;
var touchX, touchY;
var lastX, lastY = -1;
canvas = document.getElementById('scribble-canvas');
ctx = canvas.getContext('2d');
canvas.addEventListener('mousedown', scribbleMouseDown, false);
canvas.addEventListener('mousemove', scribbleMouseMove, false);
canvas.addEventListener('mouseup', scribbleMouseUp, false);
canvas.addEventListener('touchstart', scribbleTouchStart, false);
canvas.addEventListener('touchend', scribbleTouchEnd, false);
canvas.addEventListener('touchmove', scribbleTouchMove, false);
function drawLine(ctx, x, y, size) {
if (lastX == -1) {
lastX = x;
lastY = y;
}
ctx.strokeStyle = "#000000";
ctx.lineCap = "round";
ctx.lineWidth = size;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.stroke();
ctx.closePath();
lastX = x;
lastY = y;
}
function scribbleMouseDown() {
mouseDown = 1;
drawLine(ctx, mouseX, mouseY, 3);
}
function scribbleMouseUp() {
mouseDown = 0;
lastX = -1;
lastY = -1;
}
function scribbleMouseMove(e) {
getMousePos(e);
if (mouseDown == 1) {
drawLine(ctx, mouseX, mouseY, 3);
}
}
function getMousePos(e) {
if (!e) {
var e = event;
}
if (e.offsetX) {
mouseX = e.offsetX;
mouseY = e.offsetY;
} else if (e.layerX) {
mouseX = e.layerX;
mouseY = e.layerY;
}
}
function scribbleTouchStart() {
getTouchPos();
drawLine(ctx, touchX, touchY, 3);
event.preventDefault();
}
function scribbleTouchEnd() {
lastX = -1;
lastY = -1;
}
function scribbleTouchMove(e) {
getTouchPos(e);
drawLine(ctx, touchX, touchY, 3);
event.preventDefault();
}
function getTouchPos(e) {
if (!e) {
var e = event;
}
if (e.touches) {
if (e.touches.length == 1) {
var touch = e.touches[0];
touchX = touch.pageX - touch.target.offsetLeft;
touchY = touch.pageY - touch.target.offsetTop;
}
}
}
function crop(canvas) {
var w = canvas.width,
h = canvas.height;
var pix = {
x: [],
y: []
};
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var x, y, index;
for (y = 0; y < h; y++) {
for (x = 0; x < w; x++) {
index = (y * w + x) * 4;
if (imageData.data[index + 3] > 0) {
pix.x.push(x);
pix.y.push(y);
}
}
}
pix.x.sort(function(a, b) {
return a - b
});
pix.y.sort(function(a, b) {
return a - b
});
if (pix.x.length == 0) {
return '#';
}
var n = pix.x.length - 1;
w = 1 + pix.x[n] - pix.x[0];
h = 1 + pix.y[n] - pix.y[0];
var cut = ctx.getImageData(pix.x[0], pix.y[0], w, h);
//document.body.style.opacity = 0;
canvas.width = w;
canvas.height = h;
ctx.putImageData(cut, 0, 0);
return canvas.toDataURL();
}
document.getElementById('scribble-submit').addEventListener('click', function(e) {
e.preventDefault();
var data = crop(document.querySelector('#scribble-canvas'));
document.getElementById('scribble-result').setAttribute('src', data);
});
<html>
<body>
<canvas id="scribble-canvas" style="width:200; height:200; border: 1px solid blue;"></canvas>
<br>
<button id="scribble-submit">
Run
</button>
<br>
Output:
<br>
<img src="#" id="scribble-result" />
</body>
</html>
You either send the wrong data or use different data to render.
If you are saving into a .png file, you may want to strip out the initial data:image/png;base64, before turning that into bytes.

How to fill color/make visible the canvas circle

This is a canvas JavaScript code.
<canvas id="canvas" width="500" height="500" style="border:1px solid"></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var radius = 50;
var nStartX = 0;
var nStartY = 0;
var bIsDrawing = false;
var putPoint = function(e) {
nStartX = e.clientX;
nStartY = e.clientY;
bIsDrawing = true;
radius = 0;
}
var drawPoint = function(e) {
if (!bIsDrawing)
return;
var nDeltaX = nStartX - e.clientX;
var nDeltaY = nStartY - e.clientY;
radius = Math.sqrt(nDeltaX * nDeltaX + nDeltaY * nDeltaY);
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(nStartX, nStartY, radius, 0, Math.PI * 2);
context.fill();
context.fillStyle = 'rgba(0, 0, 0, 0)';
context.lineWidth = 1;
context.stroke();
}
var stopPoint = function(e) {
bIsDrawing = false;
}
canvas.addEventListener('mousedown', putPoint);
canvas.addEventListener('mousemove', drawPoint);
canvas.addEventListener('mouseup', stopPoint);
</script>
I want radius to be shown or filled with color.
This is requirement. Start with a single left mouse click (down action) which will be the center of the circle and move the mouse without lifting the left mouse button to set the radius of the circle. The circle should be drawn as you move the mouse with radius equal to distance between the first point and the mouse position. Release the left mouse button to fix the radius. A marker is added at the point where the mouse button is released to mark that point. (This will be the point on the circumference of that circle)

You need to get the offset to the top left of the canvas and remove that from the mouse coordinates to you can get the coordinates relative to the canvas top left.
How I would handle the mouse.
// get canvas offset
var canvasTopLeft = canvas.getBoundingClientRect();
// create the mouse object
var mouse = {};
mouse.x = 0;
mouse.y = 0;
mouse.down = false;
mouse.buttonChanged = false;
mouse.button = 0;
mouse.origin = {};
mouse.origin.x = canvasTopLeft.left;
mouse.origin.y = canvasTopLeft.top;
// the mouse event handler handles all events
var mouseEvent = function (e) {
mouse.x = e.clientX - mouse.origin.x;
mouse.y = e.clientY - mouse.origin.y;
mouse.buttonChanged = 0;
if (e.type === "mousedown") {
mouse.down = true;
mouse.buttonChanged = e.which;
} else if (e.type === "mouseup") {
mouse.down = false;
mouse.buttonChanged = e.which;
}
update(); // updates the display
}
// add events we want to listen to;
canvas.addEventListener('mousedown', mouseEvent);
canvas.addEventListener('mousemove', mouseEvent);
canvas.addEventListener('mouseup', mouseEvent);
The snippet show how I use it to draw circles with position and radius marked.
<canvas id="canvas" width="500" height="500" style="border:1px solid"></canvas>
<script>
// constants
const TICK_SIZE = 5;
const GIZOM_SIZE = 3;
const CIRCLE_STYLE = "BLACK";
const CIRCLE_LINE_WIDTH = 1;
const FONT = "18px Arial";
const FONT_STYLE = "RED";
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// array of circles;
var circles = [];
// current circle being drawn
var currentCircle = null;
// true if mouse dragging
var dragging = false;
// draws a circle;
function drawCircle(circle) {
var nx,
ny;
ctx.strokeStyle = CIRCLE_STYLE;
ctx.lineWidth = CIRCLE_LINE_WIDTH;
// draw circle
if (!circle.showGizom) {
ctx.beginPath();
ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2);
ctx.stroke();
} else {
// calculate the radius
var nx = circle.gx - circle.x;
var ny = circle.gy - circle.y;
circle.r = Math.sqrt(nx * nx + ny * ny);
ctx.beginPath();
ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2);
// draw center tick
ctx.moveTo(circle.x - TICK_SIZE, circle.y - TICK_SIZE);
ctx.lineTo(circle.x + TICK_SIZE, circle.y + TICK_SIZE);
ctx.moveTo(circle.x + TICK_SIZE, circle.y - TICK_SIZE);
ctx.lineTo(circle.x - TICK_SIZE, circle.y + TICK_SIZE);
// draw radius line
ctx.moveTo(circle.x, circle.y);
ctx.lineTo(circle.gx, circle.gy);
// draw gizom
ctx.moveTo(circle.gx - GIZOM_SIZE, circle.gy - GIZOM_SIZE);
ctx.lineTo(circle.gx + GIZOM_SIZE, circle.gy + GIZOM_SIZE);
ctx.moveTo(circle.gx + GIZOM_SIZE, circle.gy - GIZOM_SIZE);
ctx.lineTo(circle.gx - GIZOM_SIZE, circle.gy + GIZOM_SIZE);
ctx.stroke();
// draw radius
ctx.font = FONT;
ctx.fillStyle = FONT_STYLE;
ctx.textAlign = "center";
// get the transform to draw the text
nx /= circle.r; // normalise the vector from center to gizom
ny /= circle.r;
if(nx < 0){ // is text upside down
// set the transform to be the revers and from the gizom
ctx.setTransform(-nx, -ny, ny, -nx, circle.gx, circle.gy);
} else {
ctx.setTransform(nx, ny, -ny, nx, circle.x, circle.y);
}
ctx.fillText(circle.r.toFixed(1), circle.r / 2, 0);
ctx.setTransform(1, 0, 0, 1, 0, 0); // restore transform
}
}
// draw all circles;
function drawCircles() {
var i = 0,
len = circles.length;
for (; i < len; i++) {
drawCircle(circles[i]);
}
}
// render everything
function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawCircles();
}
// create a new circle
function createCircle(x, y) {
return currentCircle = {
x : x,
y : y,
r : 0,
gx : x, // gizom location
gy : y,
showGizom : true,
};
}
// get canvas offset
var canvasTopLeft = canvas.getBoundingClientRect();
// create the mouse object
var mouse = {};
mouse.x = 0;
mouse.y = 0;
mouse.down = false;
mouse.buttonChanged = false;
mouse.button = 0;
mouse.origin = {};
mouse.origin.x = canvasTopLeft.left;
mouse.origin.y = canvasTopLeft.top;
// the mouse event handler
var mouseEvent = function (e) {
mouse.x = e.clientX - mouse.origin.x;
mouse.y = e.clientY - mouse.origin.y;
mouse.buttonChanged = 0;
if (e.type === "mousedown") {
mouse.down = true;
mouse.buttonChanged = e.which;
} else if (e.type === "mouseup") {
mouse.down = false;
mouse.buttonChanged = e.which;
}
update();
}
// add events we want to listen to;
canvas.addEventListener('mousedown', mouseEvent);
canvas.addEventListener('mousemove', mouseEvent);
canvas.addEventListener('mouseup', mouseEvent);
// function to update mouse interaction
function update() {
//if (mouse.down || dragging) { // while the is a need to render
if (mouse.buttonChanged === 1) { // is the left button changed
if (mouse.down) { // is it down
if (currentCircle !== null) { // is there a circle active ??
currentCircle.showGizom = false; // turn off its gizom
}
circles.push(createCircle(mouse.x, mouse.y)); // create a new circle at mouse
dragging = true; // flag that we are dragging
} else {
dragging = false; // stop dragging
}
}
if (dragging) { // while dragging move the circle gizom
currentCircle.gx = mouse.x;
currentCircle.gy = mouse.y;
}
// draw any updates
render();
//}
}
</script>

get cursor x and y values with a click listener on Javascript canvas

I need a the x and y values of the cursor when the user clicks on the canvas. I have looked all over the internet and found many different ways to do this, yet I believe they don't work because I clear and update the canvas with frames. I was able to get key clicks to work though.
I just learning code and need lots of explanation.
Here is a simplified version of my code:
var canvas_area = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = canvas_width;
this.canvas.height = canvas_height;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
e.preventDefault();
canvas_area.keys = (canvas_area.keys || []);
canvas_area.keys[e.keyCode] = (e.type == "keydown");
})
window.addEventListener('keyup', function (e) {
canvas_area.keys[e.keyCode] = (e.type == "keydown");
})
canvas.addEventListener('onmousedown', function(event) {
canvas_area.cursor_position = event.clientX + ", " + event.clientY;
})
},
stop_bar : function() {
clearInterval(this.interval);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function updateGameArea() {
canvas_area.clear();
if (canvas_area.keys && canvas_area.keys[27]) {alert("pause");}//press escape key to use (27 is the escape key)
if (canvas_area.cursor_position){
alert(canvas_area.cursor_position);
}//does not work

if you change from "onmousedown" to "mousedown" it should work.
Check my fiddle on jsbin
http://jsbin.com/pimeri/81/edit?html,css,js,output
var elem = document.getElementById('canvas');
elem.addEventListener('mousemove', function(event) {
var x = parseInt(event.pageX - elem.offsetLeft );
var y = parseInt(event.pageY - elem.offsetTop );
})
elem.addEventListener('mousedown', function(event){
var x = parseInt(event.pageX - elem.offsetLeft );
var y = parseInt(event.pageY - elem.offsetTop );
})
elem.addEventListener('mouseup', function(event){
var x = parseInt(event.pageX - elem.offsetLeft );
var y = parseInt(event.pageY - elem.offsetTop );
})

canvas_area.canvas.addEventListener("click", getClickPosition, false);
function getClickPosition(e){
var xPosition = e.clientX;
var yPosition = e.clientY;
return {x: xPosition, y: yPosition}
}

Capture user input on HTML canvas/Javascript and vice versa

I am trying to draw a rectangle in HTML5 canvas based on user input. I am also trying to do the opposite. If a user draws a rectangle in the canvas, the width and height values are dropped into the form. Please see my jsfiddle.
http://jsfiddle.net/hbrennan72/FyTx5/
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var rect = {};
//var drag = false;
function getarea()
{
var wid = document.getElementById("wid").value;
var hgt = document.getElementById("hgt").value;
var area = wid * hgt;
var perim = wid * 2 + hgt * 2;
if (wid =="") {
document.getElementById("errors").innerHTML = "The value for the width is blank.";
document.getElementById('wid').focus();
}
else if (hgt == "") {
document.getElementById("errors").innerHTML = "The value for the height is blank.";
document.getElementById("hgt").focus();
}
else if (isNaN (wid)) {
document.getElementById("errors").innerHTML = "Please enter a numeric value for the width.";
document.getElementById('wid').focus();
}
else if (isNaN (hgt)) {
document.getElementById("errors").innerHTML = "Please enter a numeric value for the height.";
document.getElementById("hgt").focus();
}
else if (wid <= 0) {
document.getElementById("errors").innerHTML = "The width is less than or equal to zero.";
document.getElementById('wid').focus();
}
else if (hgt <= 0) {
document.getElementById("errors").innerHTML = "The height is less than or equal to zero.";
document.getElementById("hgt").focus();
}
else if (wid > 500) {
document.getElementById("errors").innerHTML = "The width is greater than 500.";
document.getElementById('wid').focus();
}
else if (hgt > 500) {
document.getElementById("errors").innerHTML = "The height is greater than 500.";
document.getElementById("hgt").focus();
}
else {
window.document.getElementById("area").innerHTML = area;
window.document.getElementById("perim").innerHTML = perim;
document.getElementById("errors").innerHTML = "Please see results listed above.";
}
}
function updateform (){
"use strict"
var wid = document.getElementById("wid").value;
var hgt = document.getElementById("hgt").value;
var area = wid * hgt;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2D");
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillRect(0,0, rect.wid, rect.hgt);
context.fillStyle = "#FF0000"; //red color
draw();
}
function mouseDown(e)
{
rect.startX = e.pageX - this.offsetLeft;
rect.startY = e.pageY - this.offsetTop;
canvas.style.cursor="crosshair";
drag = true;
}
function mouseUp () {
drag = false;
}
function mouseMove(e) {
if (drag) {
rect.wid = (e.pageX - this.offsetLeft) - rect.startX;
rect.hgt = (e.pageY - this.offsetTop) - rect.startY ;
context.clearRect(0,0,canvas.width,canvas.height);
draw();
}
}
function init() {
canvas.addEventListener("mousedown", mouseDown, false);
canvas.addEventListener("mouseup", mouseUp, false);
canvas.addEventListener("mousemove", mouseMove, false);
}
init();
function drawform() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2D");
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillRect(0,0, rect.wid, rect.hgt);
context.fillStyle = "#FF0000"; //red color
}
function draw (){
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillRect(rect.startX, rect.startY, rect.wid, rect.hgt);
context.fillStyle = "#378E37"; //green color
}
draw();

I have tried to do it in this way.It is working fine.The code is
$("#smt").click(function(){
var canvasel=' <canvas id="myCanvas" width="400" height="400"></canvas>'
$("#canvas").append(canvasel)
var w=$("#wid").val();
var h=$("#hgt").val();
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,w,h);
ctx.stroke();
})
$("#clr").click(function(){
$("#canvas").empty();
$("#wid").val('');
$("#hgt").val('');
})
initDraw(document.getElementById('canvas'));
function initDraw(canvas) {
function setMousePosition(e) {
var ev = e || window.event; //Moz || IE
if (ev.pageX) { //Moz
mouse.x = ev.pageX + window.pageXOffset;
mouse.y = ev.pageY + window.pageYOffset;
} else if (ev.clientX) { //IE
mouse.x = ev.clientX + document.body.scrollLeft;
mouse.y = ev.clientY + document.body.scrollTop;
}
};
var mouse = {
x: 0,
y: 0,
startX: 0,
startY: 0
};
var element = null;
canvas.onmousemove = function (e) {
setMousePosition();
if (element !== null) {
element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
}
}
canvas.onclick = function (e) {
if (element !== null) {
element = null;
canvas.style.cursor = "default";
console.log("finsihed.");
var width=$(".rectangle").width();
var height=$(".rectangle").height();
$("#wid").val(width);
$("#hgt").val(height)
} else {
console.log("begun.");
mouse.startX = mouse.x;
mouse.startY = mouse.y;
element = document.createElement('div');
element.className = 'rectangle'
element.style.left = mouse.x + 'px';
element.style.top = mouse.y + 'px';
canvas.appendChild(element)
canvas.style.cursor = "crosshair";
}
}
}
SEE DEMO HERE
NOTE:Its not working in Mozilla. I am trying to fix it.Check in Chrome

Mouseactions vs touchevents in javascript

The topic may be insufficient to adress my question sorry for that because I am not so competent with the terms. The thing is I have a canvas and can draw things on that while I click mouse.. BUT when I try to do it with touching (i.e iphone and other touch operated devices) it did not detect the movements so no thing can be drawn on canvas..
What do I need to detect touch actions ? any ideas would be great..
here is my js fiddle link http://jsfiddle.net/regeme/xNSVm/
also here is the script for drawing
painting = false;
var WIDTH = 300;
var HEIGHT =300;
function clear() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
ctx.fillStyle = "white";
}
function generate(){
var newCanvas = document.createElement('canvas');
newCanvas.width = WIDTH;
newCanvas.height = HEIGHT;
document.getElementById('container').appendChild(newCanvas);
ctx = newCanvas.getContext('2d');
ctx.fillStyle = "black";
ctx.fillRect(0, 0, WIDTH, HEIGHT);
ctx.fillStyle = "white";
newCanvas.onmousedown = function(e) {
painting = true;
ctx = newCanvas.getContext('2d');
lastX = e.pageX - this.offsetLeft;
lastY = e.pageY - this.offsetTop;
};
newCanvas.onmouseup = function(e) {
painting = false;
};
newCanvas.onmousemove = function(e) {
if (painting) {
mouseX = e.pageX - this.offsetLeft;
mouseY = e.pageY - this.offsetTop;
// find all points between
var x1 = mouseX,
x2 = lastX,
y1 = mouseY,
y2 = lastY;
var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
if (steep){
var x = x1;
x1 = y1;
y1 = x;
var y = y2;
y2 = x2;
x2 = y;
}
if (x1 > x2) {
var x = x1;
x1 = x2;
x2 = x;
var y = y1;
y1 = y2;
y2 = y;
}
var dx = x2 - x1,
dy = Math.abs(y2 - y1),
error = 0,
de = dy / dx,
yStep = -1,
y = y1;
if (y1 < y2) {
yStep = 1;
}
for (var x = x1; x < x2; x++) {
if (steep) {
ctx.fillRect(y, x, 1, 1);
} else {
ctx.fillRect(x, y, 1, 1);
}
error += de;
if (error >= 0.5) {
y += yStep;
error -= 1.0;
}
}
lastX = mouseX;
lastY = mouseY;
}
};
}
document.getElementById('button').onclick = clear;
document.getElementById('generate').onclick = generate;
document.onmouseup = function(e) {
painting = false;
};
generate();

I can't comment or I would just leave this link in a comment. http://jsfiddle.net/gfcarv/66nVn/
However, since I am here I can kind of (emphasis on kind of) what is going on in the code.
This is the part where the touch events or the mouse events are attached:
// 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);
}
and this is the drawer function, it is basically using a switch statement to perform the correct calculations on the correct event that is happening
// 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);
}
I would break those down and study that fiddle, then you should be able to either rework your code or just add-in the correct events. I would rework if possible just b/c the functions seem a little cleaner in this context.
If I have time tomorrow I will edit with some more info if needed just figured this would help you get started. Thanks!

you should use "touch" events , such as ouchstart,touchend,touchmove, here is a paper about touch events , hopes it will help you
http://www.html5rocks.com/en/mobile/touch/

Develop Reference

JavaScript is the programming language of the Web.

how to handle touch on smartphone's browsers - javascript - javascript

Related

Get image data from canvas

How to fill color/make visible the canvas circle

get cursor x and y values with a click listener on Javascript canvas

Capture user input on HTML canvas/Javascript and vice versa

Mouseactions vs touchevents in javascript

Categories

Resources