CDN: https://unpkg.com/@litecanvas/utils/dist/camera.js

import { litecanvas } from "litecanvas"
import { Camera } from "@litecanvas/utils"

litecanvas({
  loop: { init, draw }
})

function init() {
  camera = new Camera()
}

function draw() {
  cls(0)

  camera.start()

  // draw your dynamic game objects here (player, enemies, tilemap, etc)

  camera.end()

  // draw your UI here (score, lifes, etc) 
}

• x the camera position-X
• y the camera position-Y
• ox the camera offset-X
• oy the camera offset-Y
• shaking it's true when the camera is shaking
• scale the camera zoom
• rotation the camera rotation
• width the camera width
• height the camera height

Apply the camera transformations (move, zoom and rotate). You must call this method before draw anything inside of the camera.

Stop looking through the camera. You must call this method after draw anything inside of the camera.

Sets the camera X and Y

camera.lookAt(100, 100)

Moves the camera X and Y

function update(dt) {
  // moves the camera 100 px/s to right
  camera.move(100 * dt, 0)
}

Scales the camera view

// makes anything on camera 3 times bigger
camera.zoomTo(3)

Increases the camera scale

// increase the camera zoom over time
function update(dt) {
  camera.zoom(2 * dt)
}

Sets the camera rotation

// makes anything on camera 3 times bigger
camera.rotateTo(Math.PI)

Increases the camera rotation

// increase the camera rotation over time
function update(dt) {
  camera.zoom(dt)
}

Shakes the camera view

// shake when a touch/click happens
function tapped() {
  camera.shake()
}

Makes the camera stop shaking immediately

This method is used to convert a camera point (X, Y) to world point.

// convert a mouse/touch to world position
function tapped(x, y) {
  const fixedTap = camera.getWorldPoint(x, y)
}

This method is used to convert a world point (X, Y) to camera point.

Returns an array containing the position-X, position-Y, the width, and the height of the camera. Useful to see if an object is visible on the screen.