Fix pencil live preview and more zomming issues

Nibriboard/ClientFiles/BoardWindow.js

@@ -236,7 +236,7 @@ class BoardWindow extends EventEmitter
 		this.renderOthers(canvas, context);
 		// Render the currently active line
 		if(typeof this.pencil !== "undefined")
-			this.pencil.render(canvas, context);
+			this.pencil.render(this.viewport, canvas, context);
 		
 		context.restore();
 	}

Nibriboard/ClientFiles/Chunk.js

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

Nibriboard/ClientFiles/Pencil.js

@@ -143,19 +143,28 @@ class Pencil
 	 * @param  {HTMLCanvasElement} canvas  The canvas to draw to.
 	 * @param  {CanvasRenderingContext2D} context The rendering context to use to draw to the canvas.
 	 */
-	render(canvas, context) {
+	render(visibleArea, canvas, context) {
 		if(this.currentLineSegments.length == 0)
 			return;
 		
 		context.save();
 		
+		context.translate(
+			-visibleArea.x,
+			-visibleArea.y
+		);
+		
 		context.beginPath();
-		context.lineTo(this.currentLineSegments[0].x, this.currentLineSegments[0].y);
+		context.moveTo(this.currentLineSegments[0].x, this.currentLineSegments[0].y);
-		for(let point of this.currentLineSegments) {
+		for(let i = 1; i < this.currentLineSegments.length; i++) {
-			context.lineTo(point.x, point.y);
+			context.lineTo(this.currentLineSegments[i].x, this.currentLineSegments[i].y);
 		}
-		context.lineWidth = this.currentColour;
+		
+		context.lineWidth = this.currentLineWidth;
 		context.strokeStyle = this.currentColour;
+		context.lineCap = "round";
+		context.lineJoin = "round";
+		context.stroke();
 		
 		context.restore();
 	}