Camera

This is a very small library for doing viewport/camera management in a HTML5 Canvas based game in a pixel and aspect-ratio independent manner.

That is, you can use the canvas context however you like, with any sized canvas and the output will be the same (consider the case of stretching the canvas to fit various screen resolutions and devices).

Table of contents

• Camera
  • Usage
  • Moving the camera
  • Controlling camera zoom
  • Interacting with the scene
  • Overlaying the scene
  • Rendering
  • Properties
  • Methods

Usage

const canvas = document.createElement("canvas")
const context = this.canvas.getContext("2d")
const camera = new Camera(context)

Very exciting, there are a few methods to manipulate the camera with once it is created

---

Moving the camera

Move the centre of the viewport to the location specified by x and y

camera.moveTo(x, y)

---

Controlling camera zoom

Zoom out/in to the specified distance from the 2D plane

camera.zoomTo(z)

---

Interacting with the scene

Transform a coordinate pair from screen coordinates (relative to the canvas) into world coordinates (useful for intersection between mouse and entities)

Optional: obj can supply an object to be populated with the x/y (for object-reuse in garbage collection efficient code)

const coords = camera.screenToWorld(x, y, [obj])
console.log(coords.x, coords.y)

---

Overlaying the scene

Transform a coordinate pair from world coordinates into screen coordinates (relative to the canvas) - useful for placing DOM elements over the scene.

Optional: obj can supply an object to be populated with the x/y (for object-reuse in garbage collection efficient code).

const coords = camera.worldToScreen(x, y, [obj])
console.log(coords.x, coords.y)

---

Rendering

Each render pass, rendering to the context should be applied with.

camera.begin()
// Draw stuff
camera.end()

Appropriate transformations will be applied to the context, and world coordinates can be used directly with all canvas context calls.

---

Properties

Property	Description	Default Value
aspectRatio	Canvas Aspect Ratio	context.canvas.width / context.canvas.height
context	drawing context on the canvas	canvas.getContext('2d')
distance	Used for the zoom	1000
fieldOfView	The extent of the observable canvas	0.7853981633974483
lookAt	Refers to the camera position in the x and y axis	[0, 0]
viewport	Holds: camera's - width, height, left, top, right, bottom, scale	specified in the next table

viewport

Property	Definition
width	distance * Math.tan(fieldOfView)
height	width / aspectRatio
left	lookAtX - (width / 2.0)
top	lookAtY - (height / 2.0)
right	left + width
bottom	top + height
scale	[canvas.width / width, canvas.height / height]

---

Methods

Method	Description
begin()	Applies Scale and Translation Rendering
end()	2d Context restore() method Rendering
applyScale()	2d Context scale(Camera.viewport.scale[0], Camera.viewport.scale[0]) method
applyTranslation()	2d Context translate(-Camera.viewport.left, -Camera.viewport.top) method
updateViewport()	Camera.viewport data update
zoomTo(z)	Moving the camera
moveTo(x, y)	Controlling camera zoom
screenToWorld(x, y, obj)	Interacting with the scene
worldToScreen(x, y, obj)	Overlaying the scene
addListeners()	Event Listeners for Zoom and scroll around world and Center camera on "R" key

Settings

Example of default settings:

settings = {
	distange: 1000,
	initialPosition: [0, 0],
	fieldOfView: Math.PI / 4.0,
	scaleX: 1.0,
	scaleY: 1.0
}