153 lines
3.6 KiB
HTML
153 lines
3.6 KiB
HTML
<!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'> </button>
|
|
<button id='red'> </button>
|
|
<button id='blue'> </button>
|
|
<button id='green'> </button>
|
|
<button id='orange'> </button>
|
|
<button id='yellow'> </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')
|
|
|
|
|
|
function mousePosition(e) {
|
|
const canvasBounds = canvas.getBoundingClientRect()
|
|
const canvasSize = [canvas.width, canvas.height]
|
|
const x = e.pageX - canvasBounds.left - scrollX
|
|
const y = e.pageY - canvasBounds.top - scrollY
|
|
return [x/canvasBounds.width*canvasSize[0], y/canvasBounds.height*canvasSize[1]]
|
|
}
|
|
|
|
canvas.addEventListener('mousedown', e => {
|
|
drawing = true;
|
|
lastPosition = mousePosition(e)
|
|
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 = mousePosition(e)
|
|
}
|
|
})
|
|
|
|
canvas.addEventListener('mousemove', e => {
|
|
if (drawing) {
|
|
const newPosition = mousePosition(e)
|
|
if (lastPosition !== undefined) {
|
|
console.log(`lineTo: (${newPosition[0]}, ${newPosition[1]})`)
|
|
context.beginPath()
|
|
context.moveTo(lastPosition[0], lastPosition[1])
|
|
context.lineTo(newPosition[0], newPosition[1])
|
|
context.stroke()
|
|
}
|
|
lastPosition = newPosition
|
|
}
|
|
})
|
|
|
|
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>
|