From dba8d7580fa97367f8097b0ddb3f1da6dd9d17d6 Mon Sep 17 00:00:00 2001
From: Norman <nhamer@users.noreply.github.com>
Date: Fri, 3 Nov 2017 21:01:49 -0700
Subject: [PATCH 1/2] add slider for minOpacity to demo

---
 demo/index.html | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index f8de37d..773116e 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -23,7 +23,8 @@
 <div class="container">
     <div class="options">
         <label>Radius </label><input type="range" id="radius" value="25" min="10" max="50" /><br />
-        <label>Blur </label><input type="range" id="blur" value="15" min="10" max="50" />
+        <label>Blur </label><input type="range" id="blur" value="15" min="10" max="50" /><br />
+        <label>Opacity </label><input type="range" id="minOpacityPct" value="5" min="0" max="100" />
     </div>
     <canvas id="canvas" width="1000" height="600"></canvas>
 </div>
@@ -40,11 +41,12 @@
 }
 
 var heat = simpleheat('canvas').data(data).max(18),
+    minOpacity = 0,
     frame;
 
 function draw() {
     console.time('draw');
-    heat.draw();
+    heat.draw(minOpacity);
     console.timeEnd('draw');
     frame = null;
 }
@@ -58,10 +60,12 @@
 
 var radius = get('radius'),
     blur = get('blur'),
+    minOpacityPct = get('minOpacityPct'),
     changeType = 'oninput' in radius ? 'oninput' : 'onchange';
 
-radius[changeType] = blur[changeType] = function (e) {
+radius[changeType] = blur[changeType] = minOpacityPct[changeType] = function (e) {
     heat.radius(+radius.value, +blur.value);
+    minOpacity = +minOpacityPct.value / 100;
     frame = frame || window.requestAnimationFrame(draw);
 };
 

From 43285532ad974e9e48de0f2e73386dd4a377c0a6 Mon Sep 17 00:00:00 2001
From: Norman <nhamer@users.noreply.github.com>
Date: Fri, 3 Nov 2017 21:45:24 -0700
Subject: [PATCH 2/2] handle minOpacity as opacity instead of minimum scaled
 value

---
 simpleheat.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/simpleheat.js b/simpleheat.js
index dc06eb9..801c3e9 100644
--- a/simpleheat.js
+++ b/simpleheat.js
@@ -106,19 +106,20 @@ simpleheat.prototype = {
         // draw a grayscale heatmap by putting a blurred circle at each data point
         for (var i = 0, len = this._data.length, p; i < len; i++) {
             p = this._data[i];
-            ctx.globalAlpha = Math.min(Math.max(p[2] / this._max, minOpacity === undefined ? 0.05 : minOpacity), 1);
+            ctx.globalAlpha = Math.min(p[2] / this._max, 1);
             ctx.drawImage(this._circle, p[0] - this._r, p[1] - this._r);
         }
 
         // colorize the heatmap, using opacity value of each pixel to get the right color from our gradient
         var colored = ctx.getImageData(0, 0, this._width, this._height);
-        this._colorize(colored.data, this._grad);
+        this._colorize(colored.data, this._grad, minOpacity);
         ctx.putImageData(colored, 0, 0);
 
         return this;
     },
 
-    _colorize: function (pixels, gradient) {
+    _colorize: function (pixels, gradient, minOpacity) {
+        var minAlpha = 255 * (minOpacity || 0);
         for (var i = 0, len = pixels.length, j; i < len; i += 4) {
             j = pixels[i + 3] * 4; // get gradient color from opacity value
 
@@ -126,6 +127,7 @@ simpleheat.prototype = {
                 pixels[i] = gradient[j];
                 pixels[i + 1] = gradient[j + 1];
                 pixels[i + 2] = gradient[j + 2];
+                pixels[i + 3] = Math.max(pixels[i + 3], minAlpha);
             }
         }
     },