Created
March 2, 2013 12:32
-
-
Save pa6lo/5070811 to your computer and use it in GitHub Desktop.
HTML5 Multi Touch Canvas Paint (canvas + jquery)
This file contains hidden or 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 lang="en"> | |
<head> | |
<title>Multi Touch HTML5 Canvas Paint</title> | |
<meta charset="UTF-8"> | |
</head> | |
<!--[if lt IE 7 ]> <body class="ie6 "> <![endif]--> | |
<!--[if IE 7 ]> <body class="ie7 "> <![endif]--> | |
<!--[if IE 8 ]> <body class="ie8 "> <![endif]--> | |
<!--[if !IE]>--> <body class=""> <!--<![endif]--> | |
<!-- wondering wtf that ^^^ is? | |
check: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ | |
--> | |
<div id="content"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<style media="screen">canvas{border:1px solid #ccc}</style> | |
<canvas id="example" height=450 width=300></canvas> | |
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> | |
</script> | |
<script> | |
//<![CDATA[ | |
var CanvasDrawr = function(options) { | |
var canvas = document.getElementById(options.id), ctxt = canvas.getContext("2d"); | |
canvas.style.width = '100%' | |
canvas.width = canvas.offsetWidth; | |
canvas.style.width = ''; | |
ctxt.lineWidth = options.size || Math.ceil(Math.random() * 35); | |
ctxt.lineCap = options.lineCap || "round"; | |
ctxt.pX = undefined; | |
ctxt.pY = undefined; | |
var lines = [, , ]; | |
var offset = $(canvas).offset(); | |
var self = {init: function() { | |
canvas.addEventListener('touchstart', self.preDraw, false); | |
canvas.addEventListener('touchmove', self.draw, false); | |
},preDraw: function(event) { | |
$.each(event.touches, function(i, touch) { | |
var id = touch.identifier, colors = ["red", "green", "yellow", "blue", "magenta", "orangered"], mycolor = colors[Math.floor(Math.random() * colors.length)]; | |
lines[id] = {x: this.pageX - offset.left,y: this.pageY - offset.top,color: mycolor}; | |
}); | |
event.preventDefault(); | |
},draw: function(event) { | |
var e = event, hmm = {}; | |
$.each(event.touches, function(i, touch) { | |
var id = touch.identifier, moveX = this.pageX - offset.left - lines[id].x, moveY = this.pageY - offset.top - lines[id].y; | |
var ret = self.move(id, moveX, moveY); | |
lines[id].x = ret.x; | |
lines[id].y = ret.y; | |
}); | |
event.preventDefault(); | |
},move: function(i, changeX, changeY) { | |
ctxt.strokeStyle = lines[i].color; | |
ctxt.beginPath(); | |
ctxt.moveTo(lines[i].x, lines[i].y); | |
ctxt.lineTo(lines[i].x + changeX, lines[i].y + changeY); | |
ctxt.stroke(); | |
ctxt.closePath(); | |
return {x: lines[i].x + changeX,y: lines[i].y + changeY}; | |
}}; | |
return self.init(); | |
}; | |
$(function() { | |
var super_awesome_multitouch_drawing_canvas_thingy = new CanvasDrawr({id: "example",size: 15}); | |
}); | |
//]]></script> | |
</div> | |
<div id="footer"> | |
Multitouch Canvas Fingerpaint Demo.<br/> | |
<b>Code by</b> <a href="timbranyen.com">Tim Branyen</a>, <a href="http://miketaylr.com">Mike Taylr</a>, <a href="http://paulirish.com">Paul Irish</a> & <a href=//smus.com>Boris Smus</a>.</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
My hero !