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 }