Synchronise HTML5/Android painting algorithms.

Fixes #2.

assets/index.html

@@ -148,31 +148,32 @@ <h1>TeamWin</h1>
 		if (!primitive.points)
 			return;
 
+		// Keep this algorithm synchronized with WhiteBoardView.onDraw()
 		context.beginPath();
+		context.strokeStyle = '#' + primitive.color;
+		context.lineWidth = primitive.strokeWidth;
+		var firstPointX = primitive.points[0] * board.aspectRatio;
+		var firstPointY = primitive.points[1];
 		if (primitive.points.length > 2) {
-			var lastX = 0;
-			var lastY = 0;
-			for (var point = 0; point < primitive.points.length; point+=2) {
+			var lastX = firstPointX;
+			var lastY = firstPointY;
+			context.moveTo(lastX, lastY);
+			for (var point = 2; point < primitive.points.length -2; point+=2) {
 				// Second transformation for line width differences on Android.
-				var x = primitive.points[point] * board.aspectRatio;
-				var y = primitive.points[point+1];
-				if (lastX && lastY)
-					context.quadraticCurveTo(lastX, lastY, (x + lastX) / 2, (y + lastY) / 2);
-				else
-					context.moveTo(x, y);
-				lastX = x;
-				lastY = y;
+				var pointX = primitive.points[point] * board.aspectRatio;
+				var pointY = primitive.points[point+1];
+				context.quadraticCurveTo(lastX, lastY, (lastX + pointX) / 2, (lastY + pointY) / 2);
+				lastX = pointX;
+				lastY = pointY;
 			}
+
 		}
 		else {
-			var x = primitive.points[0] * board.aspectRatio;
-			var y = primitive.points[1];
-			context.moveTo(x, y);
-			context.lineTo(x, y);
+			// HTML5 canvas has no drawPoint method
+			context.arc(firstPointX, firstPointY, 0, 0, 360);
 		}
-		context.lineWidth = primitive.strokeWidth;
-		context.strokeStyle = '#' + primitive.color;
 		context.stroke();
+
 	});
 	context.restore();
 

src/team/win/WhiteBoardView.java

@@ -91,26 +91,29 @@ protected void onDraw(Canvas c) {
 		temp.setStyle(Paint.Style.FILL);
 		c.drawRect(0, 0, mWidth, mHeight, temp);
 
+		// Keep this algorithm synchronized with HTML5 canvas paint function
 		for (Primitive p : mDataStore.mPrimitiveList) {
-			Point screenPoint = worldToScreen(p.mPoints.get(0));
+			Point firstScreenPoint = worldToScreen(p.mPoints.get(0));
+			float firstPointX = firstScreenPoint.mX;
+			float firstPointY = firstScreenPoint.mY;
 			mPaint.setColor(p.mColor | 0xFF000000);
 			mPaint.setStrokeWidth(p.mStrokeWidth * mWidth * mZoomLevel);
 			if (p.mPoints.size() > 1) {
 				Path path = new Path();
-				float lX = screenPoint.mX;
-				float lY = screenPoint.mY;
-				path.moveTo(lX, lY);
+				float lastX = firstPointX;
+				float lastY = firstPointY;
+				path.moveTo(lastX, lastY);
 				for (int i = 1; i < p.mPoints.size() - 1; i++) {
-					screenPoint = worldToScreen(p.mPoints.get(i));
-					float pX = screenPoint.mX;
-					float pY = screenPoint.mY;
-					path.quadTo(lX, lY, (lX + pX) / 2, (lY + pY) / 2);
-					lX = pX;
-					lY = pY;
+					firstScreenPoint = worldToScreen(p.mPoints.get(i));
+					float pointX = firstScreenPoint.mX;
+					float pointY = firstScreenPoint.mY;
+					path.quadTo(lastX, lastY, (lastX + pointX) / 2, (lastY + pointY) / 2);
+					lastX = pointX;
+					lastY = pointY;
 				}
 				c.drawPath(path, mPaint);
 			} else {
-				c.drawPoint(screenPoint.mX, screenPoint.mY, mPaint);
+				c.drawPoint(firstPointX, firstPointY, mPaint);
 			}
 		}
 	}