Significantly improve performance

js/main.js

@@ -1,7 +1,7 @@
 let canvas = document.getElementById('drawingCanvas');
 let context = canvas.getContext('2d');
 
-context.lineJoin = 'round';
+context.lineJoin = context.lineCap = 'round';
 
 let eraserToggle = document.getElementById('eraserToggle');
 let clearButton = document.getElementById('clearButton');
@@ -13,24 +13,34 @@ let points = [];
 let brush = { colour: "#000000", size: 5 };
 let erasing = false;
 
-function addPoint(e, moving)
+let lastPoint = null;
+
+function drawAt(e)
 {
 	//TODO: Check if within bounds
 
-	let x = e.clientX - 7; //yay, magic number!
-	let y = e.clientY - 8; //^
-
 	let colour = (erasing ? "#FFFFFF" : brush.colour);
+	let size = brush.size;
 
-	points.push({ x: x, y: y, moving: moving, size: brush.size, colour: colour });
+	let x = e.clientX - 7; //HACK: yay, magic number!
+	let y = e.clientY - 8; //HACK: ^
+
+	context.strokeStyle = colour;
+	context.lineWidth = size;
+
+	context.beginPath();
+	context.moveTo(lastPoint.x, lastPoint.y);
+	context.lineTo(x, y);
+	context.closePath();
+	context.stroke();
+	lastPoint = { x: x, y: y };
 }
 
 canvas.onmousedown = function(e) {
 	drawing = true;
 
-	addPoint(e, false);
-
-	draw();
+	lastPoint = { x: e.clientX - 8, y: e.clientY - 8 }; //HACK: more magic numbers!
+	drawAt(e);
 }
 
 canvas.onmousemove = function(e) {
@@ -39,9 +49,7 @@ canvas.onmousemove = function(e) {
 		return;
 	}
 
-	addPoint(e, true);
-
-	draw();
+	drawAt(e);
 }
 
 //TODO: Stop drawing on mouseup outside canvas
@@ -55,9 +63,8 @@ eraserToggle.onclick = function(e) {
 }
 
 clearButton.onclick = function(e) {
-	points = [];
+	context.clearRect(0, 0, canvas.width, canvas.height);
 
-	draw();
 }
 
 toolSizeSelect.onchange = function(e) {
@@ -67,29 +74,3 @@ toolSizeSelect.onchange = function(e) {
 colourSelect.onchange = function(e) {
 	brush.colour = colourSelect.value;
 }
-
-function draw()
-{
-	context.clearRect(0, 0, canvas.width, canvas.height);
-
-	for(let i = 0; i < points.length; i++)
-	{
-		let point = points[i];
-
-		context.strokeStyle = point.colour;
-		context.lineWidth = point.size;
-		context.beginPath();
-		if(point.moving && i > 0)
-		{
-			let lastPoint = points[i - 1];
-			context.moveTo(lastPoint.x, lastPoint.y);
-		}
-		else
-		{
-			context.moveTo(point.x - 1, point.y);
-		}
-		context.lineTo(point.x, point.y);
-		context.closePath();
-		context.stroke();
-	}
-}