diff --git a/client_src/js/Helpers/Colourizer.mjs b/client_src/js/Helpers/Colourizer.mjs
new file mode 100644
index 0000000..38a4a53
--- /dev/null
+++ b/client_src/js/Helpers/Colourizer.mjs
@@ -0,0 +1,46 @@
+"use strict";
+
+function colourize(image, r, g, b) {
+	let canvas = document.createElement("canvas"),
+		context = canvas.getContext("2d");
+	canvas.width = image.width;
+	canvas.height = image.height;
+
+	context.drawImage(image, 0, 0);
+	
+	let image_data = context.getImageData(
+			0, 0,
+			canvas.width, canvas.height
+		),
+		buf = new ArrayBuffer(image_data.data.length),
+		view = new Uint32Array(buf),
+		view8 = new Uint8ClampedArray(buf);
+
+	console.log(`Canvas: ${canvas.width}x${canvas.height}, image data: ${image_data.width}x${image_data.height}`);
+
+
+	let count = 0;
+	for(let y = 0; y < image_data.height; y++) {
+		for(let x = 0; x < image_data.width; x++) {
+			let loc = y*image_data.width + x;
+			//if(image_data.data[loc*4 + 3] == 0) continue
+
+			view[loc] = 
+				(image_data.data[loc*4 + 3] << 24) |		// Alpha
+				((b+image_data.data[loc*4 + 2])/2 << 16) |	// Blue
+				((g+image_data.data[loc*4 + 1])/2 << 8) |	// Green
+				(r+image_data.data[loc*4])/2;				// Red
+			
+			count++;
+		}
+	}
+	console.log(`Changed ${count} / ${canvas.width*canvas.height} pixels`);
+
+	image_data.data.set(view8);
+	context.putImageData(image_data, 0, 0);
+
+	return canvas.toDataURL();
+	// let image_data = context.getImageData()
+}
+
+export default colourize;
diff --git a/client_src/marker-old.png b/client_src/marker-old.png
new file mode 100644
index 0000000..c31e6e3
Binary files /dev/null and b/client_src/marker-old.png differ