Improve bindings between pencil and interface

Nibriboard/ClientFiles/Chunk.js

@@ -60,6 +60,7 @@ class Chunk
 				);
 			}
 			
+			context.lineCap = "round";
 			context.lineWidth = line.Width;
 			context.strokeStyle = line.Colour;
 			context.stroke();

Nibriboard/ClientFiles/Interface.js

@@ -41,7 +41,7 @@ class Interface extends EventEmitter
 	setupColourSelectors()
 	{
 		this.currentColourElement = this.sidebar.querySelector(".palette .palette-colour[data-selected]");
-		this.currentColour = this.currentColourElement.style.backgroundColor;
+		this.switchColourTo(this.currentColourElement);
 		
 		var colours = this.sidebar.querySelectorAll(".palette .palette-colour");
 		for (let i = 0; i < colours.length; i++) {
@@ -140,7 +140,7 @@ class Interface extends EventEmitter
 		// Update the brush indicator
 		this.updateBrushIndicator();
 		// Emit the brush width change event
-		this.emit("brushwidthchange", { newWidth: this.currentLineWidth });
+		this.emit("brushwidthchange", { newWidth: this.currentBrushWidth });
 	}
 	
 	updateBrushIndicator()

Nibriboard/ClientFiles/Pencil.js

@@ -51,9 +51,25 @@ class Pencil
 		canvas.addEventListener("mousemove", this.handleMouseMove.bind(this));
 		canvas.addEventListener("mouseup", this.handleMouseUp.bind(this));
 		
-		this.boardWindow.interface.on("colourchange", (function(event) {
+		this.setupInterfaceBindings(this.boardWindow.interface);
+		
+	}
+	
+	setupInterfaceBindings(inInterface)
+	{
+		// Snag the initial colour from the interface
+		this.currentColour = inInterface.currentColour;
+		// Listen for future colour updates
+		inInterface.on("colourchange", (function(event) {
 		    this.currentColour = event.newColour;
 		}).bind(this))
+		
+		// Look up the initial line with in the interface
+		this.currentLineWidth = inInterface.currentBrushWidth;
+		// Listen for future updates fromt he interface
+		inInterface.on("brushwidthchange", (function(event) {
+		    this.currentLineWidth = event.newWidth;
+		}).bind(this))
 	}
 	
 	handleMouseMove(event) {