Add basic background rendering

js/graphics/background.mjs

@@ -0,0 +1,21 @@
+import {SeededRandom} from '../util.mjs';
+import {context, view, getVisibleSectors} from './index.mjs';
+import {STAR_DENSITY} from '../consts.mjs';
+
+export function render() {
+	context.fillStyle = '#000';
+
+	getVisibleSectors().forEach(s => renderSectorStars(s));
+}
+
+function renderSectorStars(sector) {
+	let rand = new SeededRandom(sector.numId);
+
+	context.fillStyle = '#fff';
+
+	for (let i = 0; i < STAR_DENSITY; i++) {
+		let sx = rand.next() * sector.size + sector.wx;
+		let sy = rand.next() * sector.size + sector.wy;
+		context.fillRect(sx, sy, 1.5, 1.5);
+	}
+}

js/graphics/index.mjs

@@ -0,0 +1,39 @@
+import {game} from '../game.mjs';
+import {getContainedSectors} from '../world/index.mjs';
+import * as background from './background.mjs';
+
+export let canvas, context, tempCanvas, tempContext;
+export let view;
+
+export function init() {
+	canvas = document.querySelector('#main');
+	context = canvas.getContext('2d');
+	tempCanvas = document.querySelector('#temp');
+	tempContext = tempCanvas.getContext('2d');
+
+	canvas.width = 600;
+	canvas.height = 600;
+
+	view = {
+		bounds: [0, 0, canvas.width, canvas.height],
+		x: 0,
+		y: 0,
+		zoom: 1
+	}
+}
+
+export function render() {
+	context.clearRect(0, 0, canvas.width, canvas.height);
+	context.fillRect(0, 0, canvas.width, canvas.height);
+	context.save();
+
+	// TODO: Translate canvas.
+
+	background.render();
+
+	context.restore();
+}
+
+export function getVisibleSectors() {
+	return getContainedSectors(...view.bounds);
+}

js/graphics/rocket.mjs

@@ -0,0 +1,6 @@
+import {canvas, context} from './index.mjs';
+import * as assets from '../assets.mjs';
+
+export function render() {
+
+}