Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 7d5bf8c

Browse files
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-
functiondraw(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+
functionsketchpad_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)

AltStyle によって変換されたページ (->オリジナル) /