cinphart/web
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Peter Hart 2020-04-26 22:53:36 -04:00
commit 7553735eaf
3 changed files with 148 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
*~

5
README.md Normal file
View File

@ -0,0 +1,5 @@
# Web Repo
Simple repo for keeping track of attempts to work with various web
technologies.

142
drawing-program/index.html Normal file
View File

@ -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>