Skip to content

Commit 7d5bf8c

Browse files
fullstackNRJfullstackNRJ
committed
code refactoring fix touch issues
1 parent accaf0e commit 7d5bf8c

File tree

2 files changed

+147
-83
lines changed

2 files changed

+147
-83
lines changed

‎each day build day!/Day 9/app.js

Lines changed: 144 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,166 @@
1-
const canvas = document.querySelector('#draw')
2-
const ctx = canvas.getContext('2d');
3-
4-
5-
6-
const brush = document.querySelector('#brush-width')
7-
brush.addEventListener('change', ()=>{
8-
let brush_thickness = 0;
9-
for (let i = 0; i < brush.options.length; i++) {
10-
var option = brush.options[i];
11-
if (option.selected)
12-
brush_thickness = Number(option.value);
13-
}
14-
//console.log(brush_thickness)
15-
//set the width
16-
ctx.lineWidth = brush_thickness|| 10;
17-
})
181

2+
//Global Variables for referencing the canvas and 2dcanvas context, mouse, touch , brush, color elements
3+
var canvas,ctx;
4+
var mouseX,mouseY,mouseDown=false;
5+
var touchX,touchY;
6+
var brush, color, eraser;
7+
let brush_thickness = 10, brush_color = '#333';
8+
9+
// Draws a dot at a specific position on the supplied canvas name
10+
// Parameters are: A canvas context, the x position, the y position, the size of the dot
11+
function drawDot(ctx,x,y,size) {
12+
// Let's use black by setting RGB values to 0, and 255 alpha (completely opaque)
13+
14+
15+
// Select a fill style
16+
ctx.fillStyle = `${brush_color}`;
17+
18+
// Draw a filled circle
19+
ctx.beginPath();
20+
ctx.arc(x, y, brush_thickness, 0, Math.PI*2, true);
21+
ctx.closePath();
22+
ctx.fill();
23+
}
1924

25+
// Clear the canvas context using the canvas width and height
26+
function clearCanvas(canvas,ctx) {
27+
ctx.clearRect(0, 0, canvas.width, canvas.height);
28+
}
2029

21-
color = document.querySelector('#color-pick')
22-
color.addEventListener('change', ()=>{
23-
//set the color
24-
ctx.strokeStyle = color.value||'#BADA55'
25-
//console.log(color.value)
26-
},false)
30+
// Keep track of the mouse button being pressed and draw a dot at current location
31+
function sketchpad_mouseDown() {
32+
mouseDown=true;
33+
drawDot(ctx,mouseX,mouseY,brush_thickness);
34+
}
2735

36+
// Keep track of the mouse button being released
37+
function sketchpad_mouseUp() {
38+
mouseDown=false;
39+
}
2840

29-
//ctx.strokeStyle = '#BADA55';
41+
// Keep track of the mouse position and draw a dot if mouse button is currently pressed
42+
function sketchpad_mouseMove(e) {
43+
// Update the mouse co-ordinates when moved
44+
getMousePos(e);
3045

31-
//ctx.lineWidth = brush_thickness|| 10;
32-
// ctx.globalCompositeOperation = 'multiply'; // blender-effect
46+
// Draw a dot if the mouse button is currently being pressed
47+
if (mouseDown) {
48+
drawDot(ctx,mouseX,mouseY,brush_thickness);
49+
}
50+
}
3351

34-
let isDrawing = false;
35-
let lastX = 0;
36-
let lastY = 0;
37-
//let hue = brush_color || 0;
3852

53+
// Get the current mouse position relative to the top-left of the canvas
54+
function getMousePos(e) {
55+
if (!e)
56+
var e = event;
3957

40-
function setColor(){
41-
ctx.strokeStyle = '#f0f8ff';
42-
}
58+
if (e.offsetX) {
59+
mouseX = e.offsetX;
60+
mouseY = e.offsetY;
61+
}
62+
else if (e.layerX) {
63+
mouseX = e.layerX;
64+
mouseY = e.layerY;
65+
}
66+
}
4367

68+
// Draw something when a touch start is detected
69+
function sketchpad_touchStart(e) {
70+
// Update the touch co-ordinates
71+
getTouchPos();
4472

45-
function clearCanvas() {
46-
ctx.clearRect(0, 0, canvas.width, canvas.height);
47-
}
73+
drawDot(ctx,touchX,touchY,12);
4874

75+
// Prevents an additional mousedown event being triggered
76+
e.preventDefault();
77+
}
4978

50-
function draw(e) {
51-
e.preventDefault();
52-
ctx.lineJoin = 'round';
53-
ctx.lineCap = 'round';
79+
// Draw something and prevent the default scrolling when touch movement is detected
80+
function sketchpad_touchMove(e) {
81+
// Update the touch co-ordinates
82+
getTouchPos(e);
5483

55-
if (!isDrawing) return;
56-
57-
//ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
58-
ctx.beginPath();
59-
// start from
60-
ctx.moveTo(lastX, lastY);
61-
// go to
62-
ctx.lineTo(e.offsetX, e.offsetY);
63-
ctx.stroke();
64-
65-
if(!e.touches){ ctx.lineTo(e.offsetX, e.offsetY); [lastX, lastY] = [e.offsetX, e.offsetY];}
84+
// During a touchmove event, unlike a mousemove event, we don't need to check if the touch is engaged, since there will always be contact with the screen by definition.
85+
drawDot(ctx,touchX,touchY,brush_thickness);
6686

67-
else{
68-
if (e.touches.length == 1) { // Only deal with one finger
69-
let touch = e.touches[0]; // Get the information for finger #1
70-
lastX=touch.clientX;
71-
lastY=touch.clientY;
87+
// Prevent a scrolling action as a result of this touchmove triggering.
88+
e.preventDefault();
7289
}
73-
ctx.lineTo(e.clientX, e.clientY);
74-
}
75-
}
76-
7790

78-
canvas.addEventListener('mousedown', (e) => {
79-
isDrawing = true;
80-
[lastX, lastY] = [e.offsetX, e.offsetY];
81-
});
82-
83-
canvas.addEventListener('mousemove', draw);
84-
canvas.addEventListener('mouseup', () => isDrawing = false);
85-
canvas.addEventListener('mouseout', () => isDrawing = false);
91+
//Eraser set color to same as background
8692

93+
function setColor(){
94+
console.log('called')
95+
brush_color = '#f0f8ff';
96+
eraser.classList.toggle('selected')
97+
}
8798

99+
/* Get the touch position relative to the top-left of the canvas
100+
Note : When we get the raw values of pageX and pageY below, they take into account the scrolling on the page
101+
but not the position relative to our target div. We'll adjust them using "target.offsetLeft" and
102+
"target.offsetTop" to get the correct values in relation to the top left of the canvas.
103+
*/
104+
function getTouchPos(e) {
105+
if (!e)
106+
var e = event;
107+
108+
if(e.touches) {
109+
if (e.touches.length == 1) { // Only deal with one finger
110+
var touch = e.touches[0]; // Get the information for finger #1
111+
touchX=touch.pageX-touch.target.offsetLeft;
112+
touchY=touch.pageY-touch.target.offsetTop;
113+
}
114+
}
115+
}
88116

89-
// mobile specific `touch` support
90-
canvas.addEventListener('touchstart', (e) =>{
91-
isDrawing = true;
92-
if (e.touches) {
93-
if (e.touches.length == 1) { // Only deal with one finger
94-
var touch = e.touches[0]; // Get the information for finger #1
95-
lastX=touch.clientX;
96-
lastY=touch.clientY;
97-
console.log(touch)
117+
// Set-up the canvas and add our event handlers after the page has loaded
118+
function init() {
119+
// Get the specific canvas element from the HTML document
120+
canvas = document.getElementById('draw');
121+
console.log(canvas)
122+
// If the browser supports the canvas tag, get the 2d drawing context for this canvas
123+
if (canvas.getContext)
124+
ctx = canvas.getContext('2d');
125+
126+
127+
//Listener to the brush and color for thickness and color
128+
brush = document.querySelector('#brush-width');
129+
color = document.querySelector('#color-pick');
130+
eraser = document.querySelector('.btn-eraser');
131+
//hookup event listeners
132+
brush.addEventListener('change', ()=>{
133+
134+
for (let i = 0; i < brush.options.length; i++) {
135+
var option = brush.options[i];
136+
if (option.selected)
137+
brush_thickness = Number(option.value);
138+
}
139+
//console.log(brush_thickness)
140+
//set the width
141+
ctx.lineWidth = brush_thickness|| 10;
142+
})
143+
144+
145+
color.addEventListener('change', ()=>{
146+
//set the color
147+
brush_color = color.value||'#BADA55'
148+
//console.log(color.value)
149+
},false)
150+
151+
152+
// Check that we have a valid context to draw on/with before adding event handlers
153+
if (ctx) {
154+
// React to mouse events on the canvas, and mouseup on the entire document
155+
canvas.addEventListener('mousedown', sketchpad_mouseDown, false);
156+
canvas.addEventListener('mousemove', sketchpad_mouseMove, false);
157+
window.addEventListener('mouseup', sketchpad_mouseUp, false);
158+
159+
// React to touch events on the canvas
160+
canvas.addEventListener('touchstart', sketchpad_touchStart, false);
161+
canvas.addEventListener('touchmove', sketchpad_touchMove, false);
98162
}
99-
}
100-
})
163+
}
164+
101165

102-
canvas.addEventListener('touchmove', draw)
166+
init();

‎each day build day!/Day 9/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@ <h1> Canvas Sketchpad 🎨 </h1>
3333
</select>
3434
</div>
3535

36-
<button onclick="setColor()">Eraser</button>
36+
<button class ="btn-eraser" onclick="setColor()">Eraser</button>
3737

38-
<input type="submit" value="Clear Sketchpad" onclick="clearCanvas()">
38+
<input type="submit" value="Clear Sketchpad" onclick="clearCanvas(canvas,ctx);">
3939
</div>
4040

4141
<div class="drawing-area">
@@ -45,6 +45,6 @@ <h1> Canvas Sketchpad 🎨 </h1>
4545
</div>
4646

4747

48-
<script defer src="./app.js"></script>
48+
<script defer src="app.js"></script>
4949
</body>
5050
</html>

0 commit comments

Comments
 (0)