const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')

// 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()

ctx.imageSmoothingEnabled = false

class ResourceCacheFactory {
  constructor () {
    this.canvas = document.createElement('canvas')
    this.ctx = this.canvas.getContext('2d')
    this.ctx.imageSmoothingEnabled = false
  }

  prepare (width, height) {
    if (width === this.canvas.width && height === this.canvas.height) {
      this.ctx.clearRect(0, 0, width, height)
    }
    this.canvas.width = width
    this.canvas.height = height
  }

  capture () {
    let img = new window.Image()
    img.src = this.canvas.toDataURL()
    return img
  }
}

export { canvas, ctx, ResourceCacheFactory }