track min/max Y values for every X pixel and use a single fillRect() …

…call (#15)
leeoniya · Oct 11, 2019 · b39bd47 · b39bd47
1 parent 5d5345c
commit b39bd47
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 16 deletions.
diff --git a/dist/uPlot.cjs.js b/dist/uPlot.cjs.js
@@ -565,12 +565,16 @@ function uPlot(opts) {
 	}
 
 	function drawLine(xdata, ydata, scaleX, scaleY, color, width, dash, fill) {
-		setCtxStyle(color, width, dash, fill);
+		setCtxStyle(color, width, dash, fill || color);
 
 		var yOk;
 		var gap = false;
 
-		ctx.beginPath();
+	//	ctx.beginPath();
+
+		var prevX = 0;
+		var yMin = Infinity;
+		var yMax = -Infinity;
 
 		for (var i = i0; i <= i1; i++) {
 			var xPos = getXPos(xdata[i], scaleX, can[WIDTH]);
@@ -586,12 +590,25 @@ function uPlot(opts) {
 					ctx.moveTo(xPos, yPos);
 					gap = false;
 				}
-				else
-					{ ctx.lineTo(xPos, yPos); }
+				else {
+					if (xPos == prevX) {
+						yMin = min(yMin, yPos);		// cheaper to use if/else?
+						yMax = max(yMax, yPos);
+					}
+					else {
+					//	let xCrisp = prevX + 0.5;
+					//	ctx.moveTo(xCrisp, yMin + 0.5);
+					//	ctx.lineTo(xCrisp, yMax + 0.5);
+						ctx.fillRect(prevX, yMin, 1, (yMax - yMin) || 1);
+						prevX = xPos;
+						yMin = min(Infinity, yPos);		// cheaper to use if/else?
+						yMax = max(-Infinity, yPos);
+					}
+				}
 			}
 		}
 
-		ctx.stroke();
+	//	ctx.stroke();
 	}
 
 	// dim is logical (getClientBoundingRect) pixels, not canvas pixels

diff --git a/dist/uPlot.iife.js b/dist/uPlot.iife.js
@@ -566,12 +566,16 @@ var uPlot = (function () {
 		}
 
 		function drawLine(xdata, ydata, scaleX, scaleY, color, width, dash, fill) {
-			setCtxStyle(color, width, dash, fill);
+			setCtxStyle(color, width, dash, fill || color);
 
 			var yOk;
 			var gap = false;
 
-			ctx.beginPath();
+		//	ctx.beginPath();
+
+			var prevX = 0;
+			var yMin = Infinity;
+			var yMax = -Infinity;
 
 			for (var i = i0; i <= i1; i++) {
 				var xPos = getXPos(xdata[i], scaleX, can[WIDTH]);
@@ -587,12 +591,25 @@ var uPlot = (function () {
 						ctx.moveTo(xPos, yPos);
 						gap = false;
 					}
-					else
-						{ ctx.lineTo(xPos, yPos); }
+					else {
+						if (xPos == prevX) {
+							yMin = min(yMin, yPos);		// cheaper to use if/else?
+							yMax = max(yMax, yPos);
+						}
+						else {
+						//	let xCrisp = prevX + 0.5;
+						//	ctx.moveTo(xCrisp, yMin + 0.5);
+						//	ctx.lineTo(xCrisp, yMax + 0.5);
+							ctx.fillRect(prevX, yMin, 1, (yMax - yMin) || 1);
+							prevX = xPos;
+							yMin = min(Infinity, yPos);		// cheaper to use if/else?
+							yMax = max(-Infinity, yPos);
+						}
+					}
 				}
 			}
 
-			ctx.stroke();
+		//	ctx.stroke();
 		}
 
 		// dim is logical (getClientBoundingRect) pixels, not canvas pixels

diff --git a/dist/uPlot.iife.min.js b/dist/uPlot.iife.min.js
diff --git a/src/uPlot.js b/src/uPlot.js
@@ -262,12 +262,16 @@ export default function uPlot(opts) {
 	}
 
 	function drawLine(xdata, ydata, scaleX, scaleY, color, width, dash, fill) {
-		setCtxStyle(color, width, dash, fill);
+		setCtxStyle(color, width, dash, fill || color);
 
 		let yOk;
 		let gap = false;
 
-		ctx.beginPath();
+	//	ctx.beginPath();
+
+		let prevX = 0;
+		let yMin = Infinity;
+		let yMax = -Infinity;
 
 		for (let i = i0; i <= i1; i++) {
 			let xPos = getXPos(xdata[i], scaleX, can[WIDTH]);
@@ -283,12 +287,25 @@ export default function uPlot(opts) {
 					ctx.moveTo(xPos, yPos);
 					gap = false;
 				}
-				else
-					ctx.lineTo(xPos, yPos);
+				else {
+					if (xPos == prevX) {
+						yMin = min(yMin, yPos);		// cheaper to use if/else?
+						yMax = max(yMax, yPos);
+					}
+					else {
+					//	let xCrisp = prevX + 0.5;
+					//	ctx.moveTo(xCrisp, yMin + 0.5);
+					//	ctx.lineTo(xCrisp, yMax + 0.5);
+						ctx.fillRect(prevX, yMin, 1, (yMax - yMin) || 1)
+						prevX = xPos;
+						yMin = min(Infinity, yPos);		// cheaper to use if/else?
+						yMax = max(-Infinity, yPos);
+					}
+				}
 			}
 		}
 
-		ctx.stroke();
+	//	ctx.stroke();
 	}
 
 	// dim is logical (getClientBoundingRect) pixels, not canvas pixels