initial commit

2020-04-26 22:53:36 -04:00 · 2020-04-26 22:53:36 -04:00 · 7553735eaf
commit 7553735eaf
3 changed files with 148 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+*~
--- a/README.md
+++ b/README.md
@ -0,0 +1,5 @@
+
+# Web Repo
+
+Simple repo for keeping track of attempts to work with various web
+technologies.
--- a/drawing-program/index.html
+++ b/drawing-program/index.html
@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Pete's Simple Drawing Program</title>
+    <style>
+      canvas#tablet {
+	  width: 400px;
+	  height: 600px;
+	  border: 1px solid black;
+      }
+      
+      menu {
+	  padding: 0px;
+	  margin: 0px;
+      }
+      
+      menu>button {
+	  width: 40px;
+	  height: 30px;
+	  margin-left: 20px;
+      }
+      
+      menu#palette>button {
+	  border: none;
+      }
+      
+      menu#actions>button {
+	  padding: 1px;
+	  border-width: 1px 1px;
+      }
+      
+      button#black {
+	  background-color: black;
+      }
+      
+      button#red {
+	  background-color: red;
+      }
+      
+      button#blue {
+	  background-color: blue;
+      }
+      
+      button#green {
+	  background-color: green;
+      }
+      
+      button#orange {
+	  background-color: orange;
+      }
+      
+      button#yellow {
+	  background-color: yellow;
+      }
+    </style>
+  </head>
+  <body>
+    <menu id='palette'>
+      <button id='black'>&nbsp</button>
+      <button id='red'>&nbsp</button>
+      <button id='blue'>&nbsp</button>
+      <button id='green'>&nbsp</button>
+      <button id='orange'>&nbsp</button>
+      <button id='yellow'>&nbsp</button>
+    </menu>
+    <canvas id='tablet' width='400' height='600'></canvas>
+    <menu id='actions'>
+      <button id='clear'>
+	Clear
+      </button>
+      <button id='done'>
+	Done
+      </button>
+    </menu>
+    <script>
+      document.addEventListener('DOMContentLoaded', e => {
+	  console.log('ready event')
+	  const canvas = document.getElementById('tablet')
+	  const context = canvas.getContext('2d')
+	  context.lineWidth = 2
+	  
+	  let drawing = false
+	  let currentColor = 'black'
+	  let lastPosition
+	  
+	  const drawingElem = document.getElementById('drawing')
+	  const colorElem = document.getElementById('color')
+	  
+	  canvas.addEventListener('mousedown', e => {
+	      drawing = true;
+	      lastPosition = [e.clientX, e.clientY]
+	      updateDebug()
+	  })
+	  canvas.addEventListener('mouseup', e => {
+	      drawing = false;
+	      lastPosition = undefined
+	  })
+	  canvas.addEventListener('mouseleave', e => {
+	      drawing = false;
+	      lastPosition = undefined
+	  })
+	  canvas.addEventListener('mouseenter', e => {
+	      drawing = (e.buttons & 1) !== 0;
+	      if (!drawing) {
+		  lastPosition = undefined
+	      } else {
+		  lastPosition = [e.clientX, e.clientY]
+	      }
+	  })
+	  
+	  canvas.addEventListener('mousemove', e => {
+	      if (drawing) {
+		  if (lastPosition !== undefined) {
+		      console.log(`lineTo: (${e.clientX}, ${e.clientY})`)
+		      context.beginPath()
+		      context.moveTo(lastPosition[0], lastPosition[1])
+		      context.lineTo(e.clientX, e.clientY)
+		      context.stroke()
+		  }
+		  lastPosition = [e.clientX, e.clientY]
+	      }
+	  })
+	  
+	  const buttons = document.querySelectorAll('menu > button')
+	  for (let idx = 0; idx < buttons.length; idx++) {
+	      buttons.item(idx).addEventListener('click', e => {
+		  currentColor = e.target.id;
+		  context.strokeStyle = currentColor
+	      })
+	  }
+	  
+	  document.getElementById('clear').addEventListener('click', e => {
+	      context.clearRect(0, 0, 400, 600)
+	  })
+	  
+	  document.getElementById('done').addEventListener('click', e => {
+  	      console.log(canvas.toDataURL('image/png'))
+	  })
+      })
+    </script>
+  </body>
+</html>