-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdraw.html
75 lines (71 loc) · 2.57 KB
/
draw.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!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");
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;
lines[id] = {x: this.pageX - offset.left, y: this.pageY - offset.top};
});
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 = 'black';
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: 2});
});
//]]></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>