main.js

import { Background } from './Background.js'

const canvas = document.getElementById('background-grid')
const ctx = canvas.getContext('2d')

const background = new Background(canvas, 50, 10)
background.style.grid.lineWidth = 1
background.style.grid.color = '#2d333b'

// resize page
window.addEventListener('resize', () => {
 background.resize(window.innerWidth, window.innerHeight)
})
background.resize(window.innerWidth, window.innerHeight)

// move background grid
canvas.addEventListener('mousemove', event => {

 // only move if left mouse button is pressed
 if (event.buttons == 1) {
 background.moveBy(event.movementX, event.movementY)
 }
})

// zoom in and out
canvas.addEventListener('wheel', event => {

 // zoom in
 if (event.deltaY < 0) {
 background.zoomAt(event.clientX, event.clientY, true)
 }

 // zoom out
 else if (event.deltaY > 0) {
 background.zoomAt(event.clientX, event.clientY, false)
 }
})

// move origin to center of page
background.moveTo(canvas.width / 2, canvas.height / 2)

background.update(() => {
 ctx.fillStyle = '#c93c37'
 ctx.strokeStyle = '#539bf5'
 ctx.beginPath()
 ctx.moveTo(window.innerWidth / 2, window.innerHeight / 2);
 ctx.lineTo(background.getOrigin().posX, background.getOrigin().posY)
 ctx.stroke()
 ctx.closePath()
 ctx.beginPath()
 ctx.arc(background.getOrigin().posX, background.getOrigin().posY, 5, 0, 2 * Math.PI);
 ctx.fill()
 ctx.closePath()
 
})