Adding my Canvas Art work (#268)

zero-to-mastery · May 22, 2022 · ed4cee6 · ed4cee6
1 parent c805429
commit ed4cee6
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 0 deletions.
diff --git a/src/art/Sridarshan/icon.png b/src/art/Sridarshan/icon.png
diff --git a/src/art/Sridarshan/index.html b/src/art/Sridarshan/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Canvaz - Favourite Brands</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <canvas width="850" height="600"> </canvas>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/src/art/Sridarshan/meta.json b/src/art/Sridarshan/meta.json
@@ -0,0 +1,5 @@
+{
+  "art_name": "Favourite Brands/Logo",
+  "author_name": "Sridarshan",
+  "author_github_url": "https://github.com/sridarshan-webjava"
+}
diff --git a/src/art/Sridarshan/script.js b/src/art/Sridarshan/script.js
@@ -0,0 +1,50 @@
+const canvas = document.querySelector("canvas");
+const ctx = canvas.getContext("2d");
+
+ctx.font = "bold 48px sans-serif";
+ctx.fillText("My Favourite Brands", 175, 70);
+
+// Constructing the ADIDAS Logo
+ctx.beginPath();
+ctx.moveTo(100, 350);
+ctx.lineTo(150, 300);
+ctx.lineTo(180, 370);
+ctx.lineTo(110, 370);
+ctx.fill();
+ctx.closePath();
+
+ctx.beginPath();
+ctx.moveTo(150, 270);
+ctx.lineTo(200, 220);
+ctx.lineTo(270, 370);
+ctx.lineTo(195, 370);
+ctx.fill();
+ctx.closePath();
+
+ctx.beginPath();
+ctx.moveTo(195, 180);
+ctx.lineTo(260, 130);
+ctx.lineTo(370, 370);
+ctx.lineTo(285, 370);
+ctx.fill();
+ctx.closePath();
+ctx.font = "bold 100px Didact Gothic";
+ctx.fillText("adidas", 90, 450);
+
+// Constructing the BENZ Logo
+ctx.beginPath();
+ctx.arc(600, 300, 150, 0, 2 * Math.PI, false);
+ctx.lineWidth = 3;
+ctx.stroke();
+ctx.closePath();
+
+ctx.beginPath();
+ctx.moveTo(620, 300);
+ctx.lineTo(600, 150);
+ctx.lineTo(580, 300);
+ctx.lineTo(473, 380);
+ctx.lineTo(600, 340);
+ctx.lineTo(723, 385);
+ctx.lineTo(620, 300);
+ctx.fill();
+ctx.closePath();
diff --git a/src/art/Sridarshan/styles.css b/src/art/Sridarshan/styles.css
@@ -0,0 +1,15 @@
+@import url("https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Noto+Sans:wght@400;700&display=swap");
+
+body {
+  height: 100vh;
+  display: grid;
+  place-items: center;
+  background-color: #ffffff;
+  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+}
+
+canvas {
+  border: 3px solid black;
+  border-radius: 0.5rem;
+  background: #fafafa;
+}