day 9

Author: fullstackNRJ

README.md

@@ -25,4 +25,5 @@ Motivate yourself to code daily till 60 days, and see the magic!
 | [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/) |
 | [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/) |
 | [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/) |
+| [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/) |
 

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

@@ -0,0 +1,22 @@
+# Sketchpad 
+
+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.
+
+
+# Challenges
+- canvas api (setting height, width, stroke, color)
+- reading input element values via js
+- touch events (single touch)
+- custom cursor
+
+# screenshots
+![screenshot1](1.png)
+![screenshot2](2.png)
+![screenshot3](3.png)
+
+# code pen
+
+<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">
+  See the Pen <a href='https://codepen.io/neeraj-mukta/pen/RwWWBNw'>HTML5 Sketchpad</a> by Neeraj Mukta
+  (<a href='https://codepen.io/neeraj-mukta'>@neeraj-mukta</a>) on <a href='https://codepen.io'>CodePen</a>.
+</iframe>

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

@@ -0,0 +1,102 @@
+const canvas = document.querySelector('#draw')
+const ctx = canvas.getContext('2d');
+
+
+
+const brush = document.querySelector('#brush-width')
+brush.addEventListener('change', ()=>{
+    let brush_thickness = 0; 
+    for (let i = 0; i < brush.options.length; i++) {
+        var option = brush.options[i];
+        if (option.selected)
+          brush_thickness = Number(option.value);
+    }  
+    //console.log(brush_thickness) 
+    //set the width
+    ctx.lineWidth = brush_thickness|| 10;
+}) 
+
+
+
+ color = document.querySelector('#color-pick')
+ color.addEventListener('change', ()=>{
+    //set the color
+    ctx.strokeStyle = color.value||'#BADA55'
+    //console.log(color.value)
+  },false)
+
+
+//ctx.strokeStyle = '#BADA55';
+
+//ctx.lineWidth = brush_thickness|| 10;
+// ctx.globalCompositeOperation = 'multiply'; // blender-effect 
+
+let isDrawing = false;
+let lastX = 0;
+let lastY = 0;
+//let hue = brush_color || 0;
+
+
+function setColor(){
+    ctx.strokeStyle = '#f0f8ff';
+}
+
+
+function clearCanvas() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+}
+
+
+function draw(e) {
+    e.preventDefault();
+    ctx.lineJoin = 'round';
+    ctx.lineCap = 'round';
+
+    if (!isDrawing) return;
+    
+    //ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+    ctx.beginPath();
+    // start from
+    ctx.moveTo(lastX, lastY);
+    // go to
+    ctx.lineTo(e.offsetX, e.offsetY);
+    ctx.stroke();
+   
+if(!e.touches){  ctx.lineTo(e.offsetX, e.offsetY); [lastX, lastY] = [e.offsetX, e.offsetY];}
+
+else{
+    if (e.touches.length == 1) { // Only deal with one finger
+        let touch = e.touches[0]; // Get the information for finger #1
+        lastX=touch.clientX;
+        lastY=touch.clientY;
+    }
+    ctx.lineTo(e.clientX, e.clientY);
+   }  
+}
+
+
+canvas.addEventListener('mousedown', (e) => {
+    isDrawing = true;
+    [lastX, lastY] = [e.offsetX, e.offsetY];
+});
+
+canvas.addEventListener('mousemove', draw);
+canvas.addEventListener('mouseup', () => isDrawing = false);
+canvas.addEventListener('mouseout', () => isDrawing = false);
+
+
+
+// mobile specific `touch` support
+canvas.addEventListener('touchstart', (e) =>{
+    isDrawing = true;
+    if (e.touches) {
+        if (e.touches.length == 1) { // Only deal with one finger
+            var touch = e.touches[0]; // Get the information for finger #1
+            lastX=touch.clientX;
+            lastY=touch.clientY;
+            console.log(touch)
+        }
+    } 
+})
+
+canvas.addEventListener('touchmove', draw)

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

@@ -0,0 +1,11 @@
+features planned :
+
+- option to save and download
+- multi-touch support
+- more tools
+- 
+
+issues :
+- offseting touch input
+- organize code into more functions
+- documentation

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

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title> HTML5 Canvas 🎨 </title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    
+    <div class="container">
+        
+        <h1> Canvas Sketchpad 🎨 </h1>
+        
+        <div class="toolbar">
+            
+            <div class="color-picker">
+                <label for="color-picker">Color</label>
+                <input type="color" name="color-picker" id="color-pick" >
+            
+            </div>
+
+        <div class="thickness">
+        
+        <label for="thickness">Thickness</label>
+            <select name="" id="brush-width">
+                <option value="10">10</option>
+                <option value="20">20</option>
+                <option value="30">30</option>
+                <option value="50">50</option>
+                <option value="100">100</option>
+                <option value="">random</option>
+            </select>
+        </div>
+
+            <button onclick="setColor()">Eraser</button>
+
+            <input type="submit" value="Clear Sketchpad" onclick="clearCanvas()">
+        </div>    
+            
+        <div class="drawing-area">
+                <canvas id="draw" width="800" height="600"></canvas>
+        </div>
+        
+</div>
+
+     
+    <script defer src="./app.js"></script>
+</body>
+</html>

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

@@ -0,0 +1,63 @@
+html, body {
+    margin: 0;
+    font-family: sans-serif;
+    font-size: 62.5%;
+    background-color: #222;
+  }
+  .container{
+      min-height: 100rem;
+      display: flex;
+      flex-direction:column;
+      justify-content: space-evenly;
+      align-items: center;
+  }
+
+  h1{
+      font-size: 3rem;
+      background: -webkit-linear-gradient(left, rgb(0, 162, 255) , yellow, green, cyan, blue, violet); /* For Safari 5.1 to 6.0 */
+      background: -o-linear-gradient(right, orange, yellow, green, cyan, rgb(223, 80, 24), violet); /* For Opera 11.1 to 12.0 */
+      background: -moz-linear-gradient(right, rgb(0, 204, 255), yellow, green, rgb(46, 158, 158), blue, violet); /* For Firefox 3.6 to 15 */
+      background: linear-gradient(to right, rgb(233, 26, 43) , yellow, green, cyan, blue, violet); /* Standard syntax (must be last) */
+      -webkit-background-clip: text;
+     -webkit-text-fill-color: transparent;
+  }
+  .toolbar{
+      width: 60rem;
+      height: 6rem;
+      display:flex;
+      align-items: center;
+      justify-content: space-evenly;
+      background-color: rgba(243, 237, 243, 0.877);
+      
+  }
+
+
+  label{
+      font-family: sans-serif;
+      font-size:1.2rem;
+  }
+  .color-picker{
+        margin-top: -1rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        align-items: center;    
+       
+  }
+
+  .thickness{
+    margin-top: -1rem; 
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+  }
+
+  input,select, button{
+      cursor: pointer;
+  }
+
+  .drawing-area{
+      background-color: #f0f8ff;
+      cursor:url('cursor.cur'),auto;
+  }