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 688f470

Browse files
day 9
1 parent a0e606b commit 688f470

File tree

10 files changed

+249
-0
lines changed

10 files changed

+249
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,5 @@ Motivate yourself to code daily till 60 days, and see the magic!
2525
| [Day 6](./each%20day%20build%20day!/Day%206/) | [The Broken Piano](./each%20day%20build%20day!/Day%206/) | [demo](https://powerofflex.z22.web.core.windows.net/) | [Takeaways](./each%20day%20build%20day!/Day%206/README.md/) |
2626
| [Day 7](./each%20day%20build%20day!/Day%207/) | [Ajax search bar](./each%20day%20build%20day!/Day%207/) | [demo](https://powerofflex.z22.web.core.windows.net/) | [Takeaways](./each%20day%20build%20day!/Day%207/README.md/) |
2727
| [Day 8](./each%20day%20build%20day!/Day%208/) | [Whack covid-19](./each%20day%20build%20day!/Day%208/) | [demo](https://whackcovid19.z22.web.core.windows.net/) | [Takeaways](./each%20day%20build%20day!/Day%208/README.md/) |
28+
| [Day 9](./each%20day%20build%20day!/Day%209/) | [Sketchpad](./each%20day%20build%20day!/Day%209/) | [demo](https://codepen.io/neeraj-mukta/pen/RwWWBNw) | [Takeaways](./each%20day%20build%20day!/Day%209/README.md/) |
2829

‎each day build day!/Day 9/1.png

60.7 KB
Loading[フレーム]

‎each day build day!/Day 9/2.png

66.9 KB
Loading[フレーム]

‎each day build day!/Day 9/3.png

67.6 KB
Loading[フレーム]

‎each day build day!/Day 9/README.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Sketchpad
2+
3+
Today, I decided to fiddle around with HTML5 canvas api. I tried to create a sketchpad like ms paint, with basic features like `color selection` , `brush thichkness`, `Eraser` all using vanilla javascript. I also added `touch` support using events like `touchstart`, `touchmove`. Although using a library like <a href=""> hammer.js </a> would have made things a lot easier but that would have been outside this challenge to build everything using vanillaJS.
4+
5+
6+
# Challenges
7+
- canvas api (setting height, width, stroke, color)
8+
- reading input element values via js
9+
- touch events (single touch)
10+
- custom cursor
11+
12+
# screenshots
13+
![screenshot1](1.png)
14+
![screenshot2](2.png)
15+
![screenshot3](3.png)
16+
17+
# code pen
18+
19+
<iframe height="265" style="width: 100%;" scrolling="no" title="HTML5 Sketchpad" src="https://codepen.io/neeraj-mukta/embed/RwWWBNw?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
20+
See the Pen <a href='https://codepen.io/neeraj-mukta/pen/RwWWBNw'>HTML5 Sketchpad</a> by Neeraj Mukta
21+
(<a href='https://codepen.io/neeraj-mukta'>@neeraj-mukta</a>) on <a href='https://codepen.io'>CodePen</a>.
22+
</iframe>

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

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
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+
})
18+
19+
20+
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)
27+
28+
29+
//ctx.strokeStyle = '#BADA55';
30+
31+
//ctx.lineWidth = brush_thickness|| 10;
32+
// ctx.globalCompositeOperation = 'multiply'; // blender-effect
33+
34+
let isDrawing = false;
35+
let lastX = 0;
36+
let lastY = 0;
37+
//let hue = brush_color || 0;
38+
39+
40+
function setColor(){
41+
ctx.strokeStyle = '#f0f8ff';
42+
}
43+
44+
45+
function clearCanvas() {
46+
ctx.clearRect(0, 0, canvas.width, canvas.height);
47+
}
48+
49+
50+
function draw(e) {
51+
e.preventDefault();
52+
ctx.lineJoin = 'round';
53+
ctx.lineCap = 'round';
54+
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];}
66+
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;
72+
}
73+
ctx.lineTo(e.clientX, e.clientY);
74+
}
75+
}
76+
77+
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);
86+
87+
88+
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)
98+
}
99+
}
100+
})
101+
102+
canvas.addEventListener('touchmove', draw)

‎each day build day!/Day 9/changelog.txt

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
features planned :
2+
3+
- option to save and download
4+
- multi-touch support
5+
- more tools
6+
-
7+
8+
issues :
9+
- offseting touch input
10+
- organize code into more functions
11+
- documentation

‎each day build day!/Day 9/cursor.cur

2.19 KB
Binary file not shown.

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title> HTML5 Canvas 🎨 </title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
11+
<div class="container">
12+
13+
<h1> Canvas Sketchpad 🎨 </h1>
14+
15+
<div class="toolbar">
16+
17+
<div class="color-picker">
18+
<label for="color-picker">Color</label>
19+
<input type="color" name="color-picker" id="color-pick" >
20+
21+
</div>
22+
23+
<div class="thickness">
24+
25+
<label for="thickness">Thickness</label>
26+
<select name="" id="brush-width">
27+
<option value="10">10</option>
28+
<option value="20">20</option>
29+
<option value="30">30</option>
30+
<option value="50">50</option>
31+
<option value="100">100</option>
32+
<option value="">random</option>
33+
</select>
34+
</div>
35+
36+
<button onclick="setColor()">Eraser</button>
37+
38+
<input type="submit" value="Clear Sketchpad" onclick="clearCanvas()">
39+
</div>
40+
41+
<div class="drawing-area">
42+
<canvas id="draw" width="800" height="600"></canvas>
43+
</div>
44+
45+
</div>
46+
47+
48+
<script defer src="./app.js"></script>
49+
</body>
50+
</html>

‎each day build day!/Day 9/style.css

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
html, body {
2+
margin: 0;
3+
font-family: sans-serif;
4+
font-size: 62.5%;
5+
background-color: #222;
6+
}
7+
.container{
8+
min-height: 100rem;
9+
display: flex;
10+
flex-direction:column;
11+
justify-content: space-evenly;
12+
align-items: center;
13+
}
14+
15+
h1{
16+
font-size: 3rem;
17+
background: -webkit-linear-gradient(left, rgb(0, 162, 255) , yellow, green, cyan, blue, violet); /* For Safari 5.1 to 6.0 */
18+
background: -o-linear-gradient(right, orange, yellow, green, cyan, rgb(223, 80, 24), violet); /* For Opera 11.1 to 12.0 */
19+
background: -moz-linear-gradient(right, rgb(0, 204, 255), yellow, green, rgb(46, 158, 158), blue, violet); /* For Firefox 3.6 to 15 */
20+
background: linear-gradient(to right, rgb(233, 26, 43) , yellow, green, cyan, blue, violet); /* Standard syntax (must be last) */
21+
-webkit-background-clip: text;
22+
-webkit-text-fill-color: transparent;
23+
}
24+
.toolbar{
25+
width: 60rem;
26+
height: 6rem;
27+
display:flex;
28+
align-items: center;
29+
justify-content: space-evenly;
30+
background-color: rgba(243, 237, 243, 0.877);
31+
32+
}
33+
34+
35+
label{
36+
font-family: sans-serif;
37+
font-size:1.2rem;
38+
}
39+
.color-picker{
40+
margin-top: -1rem;
41+
display: flex;
42+
flex-direction: column;
43+
justify-content: space-evenly;
44+
align-items: center;
45+
46+
}
47+
48+
.thickness{
49+
margin-top: -1rem;
50+
display: flex;
51+
flex-direction: column;
52+
justify-content: space-evenly;
53+
align-items: center;
54+
}
55+
56+
input,select, button{
57+
cursor: pointer;
58+
}
59+
60+
.drawing-area{
61+
background-color: #f0f8ff;
62+
cursor:url('cursor.cur'),auto;
63+
}

0 commit comments

Comments
(0)

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