-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathclicktodrawpath.html
113 lines (98 loc) · 3.98 KB
/
clicktodrawpath.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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!--
To change this template use Tools | Templates.
-->
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events | Click to Draw Path</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
canvas.default { border: 1px solid black; }
textarea { border: 1px solid #888; width: 300px; height: 100px; }
</style>
<script>
window.onload = function () {
// Get the clear button
//
var clear = document.getElementById('clearButton');
// Get the canvas element
//
var canvas = document.getElementById('canvas');
// Get a reference to the drawing context
//
var ctx = canvas.getContext('2d');
var pencil = new tool();
// This painting tool works like a drawing pencil which tracks the mouse
// movements.
function tool() {
var tool = this;
this.started = false;
// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (event) {
ctx.beginPath();
ctx.moveTo(event._x, event._y);
tool.started = true;
};
// This function is called every time you move the mouse. Obviously, it only
// draws if the tool.started state is set to true (when you are holding down
// the mouse button).
this.mousemove = function (event) {
if (tool.started) {
ctx.lineTo(event._x, event._y);
ctx.stroke();
}
};
// This is called when you release the mouse button.
this.mouseup = function (event) {
if (tool.started) {
tool.mousemove(event);
tool.started = false;
}
};
}
function onMouseEvent (event) {
var x, y;
// Get the mouse position relative to the canvas element.
//
if (event.layerX || event.layerX == 0) { // Firefox
x = event.layerX;
y = event.layerY;
} else if (event.offsetX || event.offsetX == 0) { // Opera
x = event.offsetX;
y = event.offsetY;
}
event._x = x;
event._y = y;
// Call the event handler of the tool.
var func = pencil[event.type];
if (func) {
func(event);
}
}
function onClearEvent(event) {
pencil.started = false;
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
canvas.addEventListener('mousedown', onMouseEvent, false);
canvas.addEventListener('mousemove', onMouseEvent, false);
canvas.addEventListener('mouseup', onMouseEvent, false);
clear.addEventListener('click', onClearEvent, false);
};
</script>
</head>
<body>
<p>
<a href="index.html">Back to index</a>
</p>
<canvas id="canvas" width="480" height="300" tabindex='0' class="default">
This browser or document mode doesn't support canvas
</canvas>
<div>
<input id="clearButton" type="button" value="Clear" />
</div>
</body>
</html>