Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
handPainting
function mouseDown(e){
this.draw=true;
this.ctx = this.getContext("2d");
this.ctx.strokeStyle='#000000';
this.ctx.lineWidth=2;
var o=this;
this.offsetX=this.offsetLeft;
this.offsetY=this.offsetTop;
while(o.offsetParent){
o=o.offsetParent;
this.offsetX+=o.offsetLeft;
this.offsetY+=o.offsetTop;
}
this.ctx.beginPath();
this.ctx.moveTo(e.pageX-this.offsetX,e.pageY-this.offsetY);
}
function mouseMove(e){
if (this.draw){
this.ctx.lineTo(e.pageX-this.offsetX,e.pageY-this.offsetY);
this.ctx.stroke();
}
}
function mouseUp(e){
this.draw=false;
}
function touchStart(e){
this.draw=true;
this.ctx=this.getContext("2d");
this.touch=e.targetTouches[0];
this.ctx.strokeStyle='#000000';
this.ctx.lineWidth=2;
var o=this;
this.offsetX=this.offsetLeft;
this.offsetY=this.offsetTop;
while(o.offsetParent){
o=o.offsetParent;
this.offsetX+=o.offsetLeft;
this.offsetY+=o.offsetTop;
}
this.ctx.beginPath();
this.ctx.moveTo(this.touch.pageX-this.offsetX,this.touch.pageY-this.offsetY);
e.preventDefault();
}
function touchMove(e){
this.touch=e.targetTouches[0];
if (this.draw){
this.ctx.lineTo(this.touch.pageX-this.offsetX,this.touch.pageY-this.offsetY);
this.ctx.stroke();
}
e.preventDefault();
}
function touchEnd(e){
this.draw=false;
e.preventDefault();
}
function clearPad(){
var canvas=document.querySelector('#myCanvas');
var ctx=canvas.getContext("2d");
ctx.clearRect(0,0,canvas.width,canvas.height);
}
window.addEventListener('load',function(){
var canvas=document.querySelector('#myCanvas');
canvas.addEventListener('mousedown',mouseDown);
canvas.addEventListener('mousemove',mouseMove);
canvas.addEventListener('mouseup',mouseUp);
canvas.addEventListener('touchstart',touchStart);
canvas.addEventListener('touchmove',touchMove);
canvas.addEventListener('touchend',touchEnd);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.