initialize Merge sort

src/routes/merge/+page.svelte

@@ -0,0 +1,52 @@
+<script lang="js">
+	import { createData } from '$lib/createData';
+	import { scaleData } from '$lib/scaleData';
+	import { error } from '@sveltejs/kit';
+	import { onMount } from 'svelte';
+
+	// Constants / Parameters
+	const FPS = 20;
+	const AMOUNT = 100;
+
+	// System variables
+	const data = scaleData(createData(AMOUNT));
+	/** @type {HTMLCanvasElement} */
+	let canvas;
+	/** @type {CanvasRenderingContext2D} */
+	let context;
+	/** @type {number} */
+	let width;
+	/** @type {number} */
+	let interv;
+	onMount(() => {
+		// Initialize the canvas dimensions
+		canvas.width = window.innerWidth;
+		canvas.height = window.innerHeight;
+
+		// Try getting 2D context
+		const ctx = canvas.getContext('2d');
+		if (!ctx) error(417, 'Canvas not supported');
+
+		// Initialize global variables
+		context = ctx;
+		width = canvas.width / AMOUNT;
+
+		// Start continuous animation
+		interv = setInterval(animate, 1000 / FPS);
+	});
+
+	/** Render a single frame of the sorting algorithm at a time on the canvas. */
+	function animate() {
+		// Clear canvas with black background
+		context.fillStyle = 'black';
+		context.fillRect(0, 0, canvas.width, canvas.height);
+
+		// Display datapoints as lines
+		context.fillStyle = 'white';
+		data.forEach((d, i) =>
+			context.fillRect(i * width, canvas.height, width - 1, -d * canvas.height)
+		);
+	}
+</script>
+
+<canvas bind:this={canvas} class="fixed top-0 left-0" />