Created
June 6, 2011 20:32
-
-
Save rjrodger/1011032 to your computer and use it in GitHub Desktop.
Little HTML5 mobile web app for drawing on a canvas
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="viewport" content="user-scalable=no,initial-scale=1.0,maximum-scale=1.0" /> | |
<style> | |
body { padding:10px; margin:0px; background-color: #ccc; } | |
#main { margin: 10px auto 0px auto; } | |
</style> | |
<script src="draw.js"></script> | |
</head> | |
<body> | |
<button id="clear">clear</button><br> | |
<canvas id="main" width="300" height="300"></canvas> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
window.onload = function() { | |
document.ontouchmove = function(e){ e.preventDefault(); } | |
var canvas = document.getElementById('main'); | |
var canvastop = canvas.offsetTop | |
var context = canvas.getContext("2d"); | |
var lastx; | |
var lasty; | |
context.strokeStyle = "#000000"; | |
context.lineCap = 'round'; | |
context.lineJoin = 'round'; | |
context.lineWidth = 5; | |
function clear() { | |
context.fillStyle = "#ffffff"; | |
context.rect(0, 0, 300, 300); | |
context.fill(); | |
} | |
function dot(x,y) { | |
context.beginPath(); | |
context.fillStyle = "#000000"; | |
context.arc(x,y,1,0,Math.PI*2,true); | |
context.fill(); | |
context.stroke(); | |
context.closePath(); | |
} | |
function line(fromx,fromy, tox,toy) { | |
context.beginPath(); | |
context.moveTo(fromx, fromy); | |
context.lineTo(tox, toy); | |
context.stroke(); | |
context.closePath(); | |
} | |
canvas.ontouchstart = function(event){ | |
event.preventDefault(); | |
lastx = event.touches[0].clientX; | |
lasty = event.touches[0].clientY - canvastop; | |
dot(lastx,lasty); | |
} | |
canvas.ontouchmove = function(event){ | |
event.preventDefault(); | |
var newx = event.touches[0].clientX; | |
var newy = event.touches[0].clientY - canvastop; | |
line(lastx,lasty, newx,newy); | |
lastx = newx; | |
lasty = newy; | |
} | |
var clearButton = document.getElementById('clear') | |
clearButton.onclick = clear | |
clear() | |
} |
There's a bug in the code.
Replace clientY
to pageY
to fix it.
Which elements are important for mobile devices. I used my own code. I can draw but not on mobile. What code should fix it?
My comment above...
This is my code currently. Its working for desktop just fine but for mobile I can't draw anything.
window.addEventListener("load", () => {
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
//resizing
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
//variables
let painting = true;
function startPosition(ding) {
painting = true;
draw(ding);
}
function finishedPosition() {
painting = false;
ctx.beginPath();
}
function draw(ding) {
if (painting) return;
ctx.lineWidth = 10;
ctx.lineCap = 'round';
ctx.strokeStyle = '';
ctx.lineTo(ding.pageX, ding.pageY);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(ding.pageX, ding.pageY);
}
// canvas.addEventListener('mouseup', startPosition);
// canvas.addEventListener('touchstart', startPosition);
// canvas.addEventListener('mousedown', finishedPosition);
// canvas.addEventListener('touchend', finishedPosition);
// canvas.addEventListener('mousemove', draw);
// canvas.addEventListener('touchmove', draw);
canvas.addEventListener('mousedown', finishedPosition);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', startPosition);
document.addEventListener('mouseup', startPosition);
canvas.addEventListener('contextmenu', startPosition);
canvas.addEventListener('touchstart', startPosition, false);
canvas.addEventListener('touchmove', draw, false);
canvas.addEventListener('touchend', finishedPosition, false);
function kleurRood() {
ctx.strokeStyle = '#E63B3B';
console.log('Ik ben nu Rood');
}
function kleurOranje() {
ctx.strokeStyle = '#FFA907';
console.log('Ik ben nu Oranje');
}
function kleurGeel() {
ctx.strokeStyle = '#FFC917';
console.log('Ik ben nu Geel');
}
function kleurGroen() {
ctx.strokeStyle = '#40F571';
console.log('Ik ben nu Groen');
}
function kleurBlauw() {
ctx.strokeStyle = '#0063D3';
console.log('Ik ben nu Blauw');
}
function kleurPaars() {
ctx.strokeStyle = '#BA31F7';
console.log('Ik ben nu Paars');
}
function kleurBruin() {
ctx.strokeStyle = '#A07959';
console.log('Ik ben nu Bruin');
}
function kleurGrijs() {
ctx.strokeStyle = '#C3C3C3';
console.log('Ik ben nu Grijs');
}
function kleurZwart() {
ctx.strokeStyle = 'black';
console.log('Ik ben nu Zwart');
}
function kleurWit() {
ctx.strokeStyle = 'white';
console.log('Ik ben nu Wit');
}
document.getElementsByClassName('kleurrood')[0].addEventListener('click', kleurRood);
document.getElementsByClassName('kleuroranje')[0].addEventListener('click', kleurOranje);
document.getElementsByClassName('kleurgeel')[0].addEventListener('click', kleurGeel);
document.getElementsByClassName('kleurgroen')[0].addEventListener('click', kleurGroen);
document.getElementsByClassName('kleurblauw')[0].addEventListener('click', kleurBlauw);
document.getElementsByClassName('kleurpaars')[0].addEventListener('click', kleurPaars);
document.getElementsByClassName('kleurbruin')[0].addEventListener('click', kleurBruin);
document.getElementsByClassName('kleurgrijs')[0].addEventListener('click', kleurGrijs);
// document.getElementsByClassName('kleurzwart')[0].addEventListener('mouseover', kleurZwart);
document.getElementsByClassName('kleurzwart')[0].addEventListener('click', kleurZwart);
document.getElementsByClassName('kleurwit')[0].addEventListener('click', kleurWit);
// herstarten van de canvas
function herstarten() {
window.location.reload();
}
document.getElementsByClassName('reset')[0].addEventListener('click', herstarten);
});
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks you for your help