maaike's code samples

2021-09-04 21:22:51 +02:00
parent 0189d40676
commit b89b9dfb3f
70 changed files with 2737 additions and 0 deletions
@@ -0,0 +1,38 @@
+<html>
+  <head>
+    <style>
+      canvas {
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="canvas"></canvas>
+    <input type="color" id="squareColor" />
+    <br>
+    <img src="" width="200" height="200" id="holder" />
+    <input type="button" id="save" value="save" />
+    <script>
+      let canvas = document.getElementById("canvas");
+      let ctx = canvas.getContext("2d");
+      canvas.width = 200;
+      canvas.height = 200;
+      
+      let bgC = document.getElementById("squareColor");
+      bgC.addEventListener("change", function () {
+        color = event.target.value;
+        draw(color);
+      });
+
+      document.getElementById("save").addEventListener("click", function () {
+        let dataURL = canvas.toDataURL();
+        document.getElementById("holder").src = dataURL;
+      });
+
+      function draw(color) {
+        ctx.fillStyle = color;
+        ctx.fillRect(70, 70, 100, 100);
+      }
+    </script>
+  </body>
+</html>