added the canvas project

ShaileshKumar007 · ShaileshKumar007 · commit 7090811289ae · 2022-10-05T19:32:34.000+05:30
diff --git a/medium/Canvas/README.md b/medium/Canvas/README.md
@@ -0,0 +1,18 @@
+# Hacktoberfest 2022 - JavaScript Easy Programs
+
+## Canvas
+
+### Description
+The Canvas API provides a means for drawing graphics via JavaScript and the HTML <canvas> element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.
+In this project I've created the canvas on which anyone can draw something with their cursor. While drawing, the color and thickness of the pen changes automatically.
+
+
+
+### Maintainer
+- [Anamaya](https://www.linkedin.com/in/anamaya1729/)
+- [Vaibhav](https://https://www.linkedin.com/in/vaibhava17/)
+
+### License
+**This project is licensed under the GNU GENERAL PUBLIC License - see the [LICENSE](../LICENSE) file for details**
+
+### Happy Coding! :smile:
diff --git a/medium/Canvas/app.js b/medium/Canvas/app.js
@@ -0,0 +1,53 @@
+const canvas = document.querySelector('#draw');
+const ctx = canvas.getContext('2d');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+ctx.strokeStyle = '#BADA55';
+ctx.lineJoin = 'round';
+ctx.lineCap = 'round';
+ctx.lineWidth = 100;
+// ctx.globalCompositeOperation = 'multiply';
+
+let isDrawing = false;
+let lastX = 0;
+let lastY = 0;
+let hue = 0;
+let direction = true;
+
+function draw(e) {
+  if (!isDrawing) return; // stop the fn from running when they are not moused down
+  console.log(e);
+  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
+  ctx.beginPath();
+  // start from
+  ctx.moveTo(lastX, lastY);
+  // go to
+  ctx.lineTo(e.offsetX, e.offsetY);
+  ctx.stroke();
+  [lastX, lastY] = [e.offsetX, e.offsetY];
+
+  hue++;
+  if (hue >= 360) {
+    hue = 0;
+  }
+  if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
+    direction = !direction;
+  }
+
+  if(direction) {
+    ctx.lineWidth++;
+  } else {
+    ctx.lineWidth--;
+  }
+
+}
+
+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);
diff --git a/medium/Canvas/index.html b/medium/Canvas/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>HTML5 Canvas</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+
+<canvas id="draw" width="800" height="800"></canvas>
+
+<script src="app.js"></script>
+</body>
+</html>
diff --git a/medium/Canvas/style.css b/medium/Canvas/style.css
@@ -0,0 +1,3 @@
+html, body {
+    margin: 0;
+  }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+html, body {`
	`2`	`+ margin: 0;`
	`3`	`+ }`