/
canvas.js
116 lines (101 loc) · 2.87 KB
/
canvas.js
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
114
115
116
context1 = document.getElementById('canvas1').getContext("2d");
context2 = document.getElementById('canvas2').getContext("2d");
$(document).ready(function() {
console.log("hmm")
});
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect(), // abs. size of element
scaleX = canvas.width / rect.width, // relationship bitmap vs. element for X
scaleY = canvas.height / rect.height; // relationship bitmap vs. element for Y
return {
x: (evt.clientX - rect.left) * scaleX, // scale mouse coordinates after they have
y: (evt.clientY - rect.top) * scaleY // been adjusted to be relative to element
}
}
function addclick1(x, y, dragging)
{
clickX1.push(x);
clickY1.push(y);
clickDrag1.push(dragging);
}
function addclick2(x, y, dragging)
{
clickX2.push(x);
clickY2.push(y);
clickDrag2.push(dragging);
}
$('#canvas1').mousedown(function(e) {
var mousex = getMousePos(this, e).x
var mousey = getMousePos(this, e).y
paint = true;
addclick1(mousex, mousey);
redraw();
});
$('#canvas2').mousedown(function(e) {
var mousex = getMousePos(this, e).x
var mousey = getMousePos(this, e).y
paint = true;
addclick2(mousex, mousey);
redraw();
});
$('#canvas1').mousemove(function(e){
if(paint){
var mousex = getMousePos(this, e).x
var mousey = getMousePos(this, e).y
addclick1(mousex, mousey, true);
redraw();
}
});
$('#canvas2').mousemove(function(e){
if(paint){
var mousex = getMousePos(this, e).x
var mousey = getMousePos(this, e).y
addclick2(mousex, mousey, true);
redraw();
}
});
$('.ncanvas').mouseup(function(e){
paint = false;
});
$('.ncanvas').mouseleave(function(e){
paint = false;
});
var clickX1 = new Array();
var clickY1 = new Array();
var clickDrag1 = new Array();
var paint;
var clickX2 = new Array();
var clickY2 = new Array();
var clickDrag2 = new Array();
function redraw(){
context1.clearRect(0, 0, context1.canvas.width, context1.canvas.height); // Clears the canvas
context1.strokeStyle = "#df4b26";
context1.lineJoin = "round";
context1.lineWidth = 10;
for(var i=0; i < clickX1.length; i++) {
context1.beginPath();
if(clickDrag1[i] && i){
context1.moveTo(clickX1[i-1], clickY1[i-1]);
}else{
context1.moveTo(clickX1[i]-1, clickY1[i]);
}
context1.lineTo(clickX1[i], clickY1[i]);
context1.closePath();
context1.stroke();
}
context2.clearRect(0, 0, context1.canvas.width, context1.canvas.height); // Clears the canvas
context2.strokeStyle = "#df4b26";
context2.lineJoin = "round";
context2.lineWidth = 10;
for(var i=0; i < clickX2.length; i++) {
context2.beginPath();
if(clickDrag2[i] && i){
context2.moveTo(clickX2[i-1], clickY2[i-1]);
}else{
context2.moveTo(clickX2[i]-1, clickY2[i]);
}
context2.lineTo(clickX2[i], clickY2[i]);
context2.closePath();
context2.stroke();
}
}