66 lines
1.3 KiB
JavaScript
66 lines
1.3 KiB
JavaScript
const canvas = document.createElement('canvas')
|
|
const ctx = canvas.getContext('2d')
|
|
|
|
ctx.mouse = { pos: {} }
|
|
|
|
canvas.addEventListener('mousemove', (e) => {
|
|
let x
|
|
let y
|
|
|
|
if (e.changedTouches) {
|
|
let touch = e.changedTouches[0]
|
|
if (touch) {
|
|
e.pageX = touch.pageX
|
|
e.pageY = touch.pageY
|
|
}
|
|
}
|
|
|
|
if (e.pageX || e.pageY) {
|
|
x = e.pageX
|
|
y = e.pageY
|
|
} else {
|
|
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft
|
|
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop
|
|
}
|
|
|
|
x -= canvas.offsetLeft
|
|
y -= canvas.offsetTop
|
|
|
|
if (ctx.oX && ctx.oY) {
|
|
x += ctx.oX
|
|
y += ctx.oY
|
|
}
|
|
|
|
ctx.mouse.pos.x = x
|
|
ctx.mouse.pos.y = y
|
|
}, false)
|
|
|
|
canvas.addEventListener('mousedown', (e) => {
|
|
e.preventDefault()
|
|
ctx.mouse['btn' + e.button] = true
|
|
})
|
|
|
|
canvas.addEventListener('mouseup', (e) => {
|
|
e.preventDefault()
|
|
ctx.mouse['btn' + e.button] = false
|
|
})
|
|
|
|
canvas.addEventListener('contextmenu', (e) => {
|
|
e.preventDefault()
|
|
})
|
|
|
|
// Resize the canvas when window is resized
|
|
canvas.resizeWorkspace = function () {
|
|
canvas.width = window.innerWidth
|
|
canvas.height = window.innerHeight
|
|
}
|
|
|
|
window.addEventListener('resize', canvas.resizeWorkspace, false)
|
|
|
|
// Add elements to the document
|
|
document.body.appendChild(canvas)
|
|
|
|
canvas.resizeWorkspace()
|
|
|
|
export { canvas, ctx }
|