Skip to content

Instantly share code, notes, and snippets.

@rjrodger

rjrodger/draw.html

Created June 6, 2011 20:32
Show Gist options
  • Save rjrodger/1011032 to your computer and use it in GitHub Desktop.
Save rjrodger/1011032 to your computer and use it in GitHub Desktop.
Download ZIP
Little HTML5 mobile web app for drawing on a canvas
Raw
draw.html
<!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>
Raw
draw.js
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()
}
@cs09g
Copy link

cs09g commented Aug 3, 2015

It works smoothly ! Thanks

Copy link

ghost commented Nov 20, 2018

Thanks you for your help

@vladlu
Copy link

vladlu commented May 16, 2019

There's a bug in the code.

Replace clientY to pageY to fix it.

@mikehov
Copy link

mikehov commented Jun 12, 2019

Which elements are important for mobile devices. I used my own code. I can draw but not on mobile. What code should fix it?

@vladlu
Copy link

vladlu commented Jun 12, 2019

My comment above...

@mikehov
Copy link

mikehov commented Jun 12, 2019

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