From 91d9178217b94744dd391fba1a1fb4680636a945 Mon Sep 17 00:00:00 2001
From: Ilia Mazlov <vfpkjd@gmail.com>
Date: Wed, 15 Apr 2020 13:27:21 +0200
Subject: [PATCH] added transparency using rgba() instead of rgb()

---
 demo/index.html             |  35 +++++--
 dist/leaflet.hotline.js     | 180 ++++++++++++++++++++++++++++--------
 dist/leaflet.hotline.min.js |   2 +-
 src/leaflet.hotline.js      |  38 +++++---
 4 files changed, 190 insertions(+), 65 deletions(-)
diff --git a/demo/index.html b/demo/index.html
index 05212b1..9c5f0ed 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1,14 +1,14 @@
 <html>
 <head>
 	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
-	<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
+	<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
 	<script src="js/coords.js"></script>
 	<script src="../dist/leaflet.hotline.js"></script>
-	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
+	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
 	<style>
 		header,
 		section {
-			max-width: 600px;
+			max-width: 700px;
 			margin: 1.5em auto;
 			text-align: center;
 		}
@@ -78,14 +78,20 @@ <h1>
 			<label>
 				<span>Palette color 1</span>
 				<input id="paletteColor1" type="color" value="#008800"/>
+				<br/>
+				0 <input id="paletteColor1Alpha" type="range" min="0" max="255" value="255"/> 1.0
 			</label>
 			<label>
 				<span>Palette color 2</span>
 				<input id="paletteColor2" type="color" value="#ffff00"/>
+				<br/>
+				0 <input id="paletteColor2Alpha" type="range" min="0" max="255" value="255"/> 1.0
 			</label>
 			<label>
 				<span>Palette color 3</span>
 				<input id="paletteColor3" type="color" value="#ff0000"/>
+				<br/>
+				0 <input id="paletteColor3Alpha" type="range" min="0" max="255" value="255"/> 1.0
 			</label>
 			<label>
 				<span>Smooth factor - </span>
@@ -94,7 +100,7 @@ <h1>
 		</aside>
 	</section>
 	<script>
-		var tiles = L.tileLayer('//{s}.tile.osm.org/{z}/{x}/{y}.png', {
+		var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
 			attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 		});
 		var map = L.map('map', {
@@ -107,9 +113,9 @@ <h1>
 			min: 150,
 			max: 350,
 			palette: {
-				0.0: '#008800',
-				0.5: '#ffff00',
-				1.0: '#ff0000'
+				0.0: '#008800ff',
+				0.5: '#ffff00ff',
+				1.0: '#ff0000ff'
 			},
 			weight: 5,
 			outlineColor: '#000000',
@@ -139,12 +145,21 @@ <h1>
 		[paletteColor1, paletteColor2, paletteColor3].forEach(function (element) {
 			element.addEventListener('input', updatePalette);
 		});
+		var paletteColor1Alpha = document.getElementById('paletteColor1Alpha');
+		var paletteColor2Alpha = document.getElementById('paletteColor2Alpha');
+		var paletteColor3Alpha = document.getElementById('paletteColor3Alpha');
+		[paletteColor1Alpha, paletteColor2Alpha, paletteColor3Alpha].forEach(function (element) {
+			element.addEventListener('input', updatePalette);
+		});
 		function updatePalette() {
+			let a1 = parseInt(paletteColor1Alpha.value).toString(16);
+			let a2 = parseInt(paletteColor2Alpha.value).toString(16);
+			let a3 = parseInt(paletteColor3Alpha.value).toString(16);
 			hotlineLayer.setStyle({
 				'palette': {
-					0.0: paletteColor1.value,
-					0.5: paletteColor2.value,
-					1.0: paletteColor3.value
+					0.0: paletteColor1.value + (a1.length == 1 ? "0" : "") + a1,
+					0.5: paletteColor2.value + (a2.length == 1 ? "0" : "") + a2,
+					1.0: paletteColor3.value + (a3.length == 1 ? "0" : "") + a3
 				}
 			}).redraw();
 		}
diff --git a/dist/leaflet.hotline.js b/dist/leaflet.hotline.js
index f27b86c..413741e 100644
--- a/dist/leaflet.hotline.js
+++ b/dist/leaflet.hotline.js
@@ -4,131 +4,189 @@
  https://github.com/iosphere/Leaflet.hotline/
 */
 (function(root, plugin) {
-    if (typeof define === "function" && define.amd) {
-        define([ "leaflet" ], plugin);
-    } else if (typeof exports === "object") {
+    if (typeof define === 'function' && define.amd) {
+        define(['leaflet'], plugin);
+    } else if (typeof exports === 'object') {
         module.exports = plugin;
     } else {
         plugin(root.L);
     }
-})(this, function(L) {
+}(this, function(L) {
     if (L.Hotline) {
         return L;
     }
+
     var Hotline = function(canvas) {
         if (!(this instanceof Hotline)) {
             return new Hotline(canvas);
         }
+
         var defaultPalette = {
-            0: "green",
-            .5: "yellow",
-            1: "red"
+            0.0: 'green',
+            0.5: 'yellow',
+            1.0: 'red'
         };
-        this._canvas = canvas = typeof canvas === "string" ? document.getElementById(canvas) : canvas;
-        this._ctx = canvas.getContext("2d");
+
+        this._canvas = canvas = typeof canvas === 'string' ?
+            document.getElementById(canvas) :
+            canvas;
+
+        this._ctx = canvas.getContext('2d');
         this._width = canvas.width;
         this._height = canvas.height;
+
         this._weight = 5;
         this._outlineWidth = 1;
-        this._outlineColor = "black";
+        this._outlineColor = 'black';
+
         this._min = 0;
         this._max = 1;
+
         this._data = [];
+
         this.palette(defaultPalette);
     };
+
     Hotline.prototype = {
         width: function(width) {
             this._width = width;
             return this;
         },
+
         height: function(height) {
             this._height = height;
             return this;
         },
+
         weight: function(weight) {
             this._weight = weight;
             return this;
         },
+
         outlineWidth: function(outlineWidth) {
             this._outlineWidth = outlineWidth;
             return this;
         },
+
         outlineColor: function(outlineColor) {
             this._outlineColor = outlineColor;
             return this;
         },
+
         palette: function(palette) {
-            var canvas = document.createElement("canvas"), ctx = canvas.getContext("2d"), gradient = ctx.createLinearGradient(0, 0, 0, 256);
+            var canvas = document.createElement('canvas'),
+                ctx = canvas.getContext('2d'),
+                gradient = ctx.createLinearGradient(0, 0, 0, 256);
+
             canvas.width = 1;
             canvas.height = 256;
+
             for (var i in palette) {
                 gradient.addColorStop(i, palette[i]);
             }
+
             ctx.fillStyle = gradient;
             ctx.fillRect(0, 0, 1, 256);
+
             this._palette = ctx.getImageData(0, 0, 1, 256).data;
+
             return this;
         },
+
         min: function(min) {
             this._min = min;
             return this;
         },
+
         max: function(max) {
             this._max = max;
             return this;
         },
+
+
         data: function(data) {
             this._data = data;
             return this;
         },
+
         add: function(path) {
             this._data.push(path);
             return this;
         },
+
         draw: function() {
             var ctx = this._ctx;
-            ctx.globalCompositeOperation = "source-over";
-            ctx.lineCap = "round";
+
+            ctx.globalCompositeOperation = 'source-over';
+            ctx.lineCap = 'round';
+
             this._drawOutline(ctx);
             this._drawHotline(ctx);
+
             return this;
         },
+
         getRGBForValue: function(value) {
-            var valueRelative = Math.min(Math.max((value - this._min) / (this._max - this._min), 0), .999);
+            var valueRelative = Math.min(Math.max((value - this._min) / (this._max - this._min), 0), 0.999);
             var paletteIndex = Math.floor(valueRelative * 256) * 4;
-            return [ this._palette[paletteIndex], this._palette[paletteIndex + 1], this._palette[paletteIndex + 2] ];
+
+            return [
+                this._palette[paletteIndex],
+                this._palette[paletteIndex + 1],
+                this._palette[paletteIndex + 2],
+                this._palette[paletteIndex + 3] / 255.0
+            ];
         },
+
         _drawOutline: function(ctx) {
             var i, j, dataLength, path, pathLength, pointStart, pointEnd;
+
             if (this._outlineWidth) {
-                for (i = 0, dataLength = this._data.length; i < dataLength; i++) {
-                    path = this._data[i];
-                    ctx.lineWidth = this._weight + 2 * this._outlineWidth;
-                    for (j = 1, pathLength = path.length; j < pathLength; j++) {
-                        pointStart = path[j - 1];
-                        pointEnd = path[j];
-                        ctx.strokeStyle = this._outlineColor;
-                        ctx.beginPath();
-                        ctx.moveTo(pointStart.x, pointStart.y);
-                        ctx.lineTo(pointEnd.x, pointEnd.y);
-                        ctx.stroke();
+                ctx.save();
+                const lws = [this._weight, this._weight + 2 * this._outlineWidth];
+                const gcos = ['source-over', 'source-out'];
+                const clrs = ['white', this._outlineColor];
+                for (let w = 0; w < 2; w++) {
+                    ctx.strokeStyle = clrs[w];
+                    ctx.lineWidth = lws[w];
+                    ctx.globalCompositeOperation = gcos[w];
+                    ctx.beginPath();
+                    for (i = 0, dataLength = this._data.length; i < dataLength; i++) {
+                        path = this._data[i];
+                        for (j = 1, pathLength = path.length; j < pathLength; j++) {
+                            pointStart = path[j - 1];
+                            pointEnd = path[j];
+
+                            ctx.moveTo(pointStart.x, pointStart.y);
+                            ctx.lineTo(pointEnd.x, pointEnd.y);
+                        }
                     }
+                    ctx.stroke();
                 }
+                ctx.restore();
             }
         },
+
         _drawHotline: function(ctx) {
-            var i, j, dataLength, path, pathLength, pointStart, pointEnd, gradient, gradientStartRGB, gradientEndRGB;
+            var i, j, dataLength, path, pathLength, pointStart, pointEnd,
+                gradient, gradientStartRGB, gradientEndRGB;
+
+            ctx.save();
             ctx.lineWidth = this._weight;
+
             for (i = 0, dataLength = this._data.length; i < dataLength; i++) {
                 path = this._data[i];
+
                 for (j = 1, pathLength = path.length; j < pathLength; j++) {
                     pointStart = path[j - 1];
                     pointEnd = path[j];
+
                     gradient = ctx.createLinearGradient(pointStart.x, pointStart.y, pointEnd.x, pointEnd.y);
                     gradientStartRGB = this.getRGBForValue(pointStart.z);
                     gradientEndRGB = this.getRGBForValue(pointEnd.z);
-                    gradient.addColorStop(0, "rgb(" + gradientStartRGB.join(",") + ")");
-                    gradient.addColorStop(1, "rgb(" + gradientEndRGB.join(",") + ")");
+                    gradient.addColorStop(0, 'rgb(' + gradientStartRGB.join(',') + ')');
+                    gradient.addColorStop(1, 'rgb(' + gradientEndRGB.join(',') + ')');
+
                     ctx.strokeStyle = gradient;
                     ctx.beginPath();
                     ctx.moveTo(pointStart.x, pointStart.y);
@@ -136,29 +194,41 @@
                     ctx.stroke();
                 }
             }
+            ctx.restore();
         }
     };
+
+
     var Renderer = L.Canvas.extend({
         _initContainer: function() {
             L.Canvas.prototype._initContainer.call(this);
             this._hotline = new Hotline(this._container);
         },
+
         _update: function() {
             L.Canvas.prototype._update.call(this);
             this._hotline.width(this._container.width);
             this._hotline.height(this._container.height);
         },
+
         _updatePoly: function(layer) {
             if (!this._drawing) {
                 return;
             }
+
             var parts = layer._parts;
+
             if (!parts.length) {
                 return;
             }
+
             this._updateOptions(layer);
-            this._hotline.data(parts).draw();
+
+            this._hotline
+                .data(parts)
+                .draw();
         },
+
         _updateOptions: function(layer) {
             if (layer.options.min != null) {
                 this._hotline.min(layer.options.min);
@@ -180,22 +250,30 @@
             }
         }
     });
+
     var renderer = function(options) {
         return L.Browser.canvas ? new Renderer(options) : null;
     };
+
+
     var Util = {
         clipSegment: function(a, b, bounds, useLastCode, round) {
-            var codeA = useLastCode ? this._lastCode : L.LineUtil._getBitCode(a, bounds), codeB = L.LineUtil._getBitCode(b, bounds), codeOut, p, newCode;
+            var codeA = useLastCode ? this._lastCode : L.LineUtil._getBitCode(a, bounds),
+                codeB = L.LineUtil._getBitCode(b, bounds),
+                codeOut, p, newCode;
+
             this._lastCode = codeB;
+
             while (true) {
                 if (!(codeA | codeB)) {
-                    return [ a, b ];
+                    return [a, b];
                 } else if (codeA & codeB) {
                     return false;
                 } else {
                     codeOut = codeA || codeB;
                     p = L.LineUtil._getEdgeIntersection(a, b, codeOut, bounds, round);
                     newCode = L.LineUtil._getBitCode(p, bounds);
+
                     if (codeOut === codeA) {
                         p.z = a.z;
                         a = p;
@@ -209,29 +287,37 @@
             }
         }
     };
+
+
     L.Hotline = L.Polyline.extend({
         statics: {
             Renderer: Renderer,
             renderer: renderer
         },
+
         options: {
             renderer: renderer(),
             min: 0,
             max: 1,
             palette: {
-                0: "green",
-                .5: "yellow",
-                1: "red"
+                0.0: 'green',
+                0.5: 'yellow',
+                1.0: 'red'
             },
             weight: 5,
-            outlineColor: "black",
+            outlineColor: 'black',
             outlineWidth: 1
         },
+
         getRGBForValue: function(value) {
             return this._renderer._hotline.getRGBForValue(value);
         },
+
         _projectLatlngs: function(latlngs, result, projectedBounds) {
-            var flat = latlngs[0] instanceof L.LatLng, len = latlngs.length, i, ring;
+            var flat = latlngs[0] instanceof L.LatLng,
+                len = latlngs.length,
+                i, ring;
+
             if (flat) {
                 ring = [];
                 for (i = 0; i < len; i++) {
@@ -246,35 +332,49 @@
                 }
             }
         },
+
         _clipPoints: function() {
             if (this.options.noClip) {
                 this._parts = this._rings;
                 return;
             }
+
             this._parts = [];
-            var parts = this._parts, bounds = this._renderer._bounds, i, j, k, len, len2, segment, points;
+
+            var parts = this._parts,
+                bounds = this._renderer._bounds,
+                i, j, k, len, len2, segment, points;
+
             for (i = 0, k = 0, len = this._rings.length; i < len; i++) {
                 points = this._rings[i];
+
                 for (j = 0, len2 = points.length; j < len2 - 1; j++) {
                     segment = Util.clipSegment(points[j], points[j + 1], bounds, j, true);
+
                     if (!segment) {
                         continue;
                     }
+
                     parts[k] = parts[k] || [];
                     parts[k].push(segment[0]);
-                    if (segment[1] !== points[j + 1] || j === len2 - 2) {
+
+                    if ((segment[1] !== points[j + 1]) || (j === len2 - 2)) {
                         parts[k].push(segment[1]);
                         k++;
                     }
                 }
             }
         },
+
         _clickTolerance: function() {
             return this.options.weight / 2 + this.options.outlineWidth + (L.Browser.touch ? 10 : 0);
         }
     });
+
     L.hotline = function(latlngs, options) {
         return new L.Hotline(latlngs, options);
     };
+
+
     return L;
-});
+}));
\ No newline at end of file
diff --git a/dist/leaflet.hotline.min.js b/dist/leaflet.hotline.min.js
index ecfda20..cca90db 100644
--- a/dist/leaflet.hotline.min.js
+++ b/dist/leaflet.hotline.min.js
@@ -3,4 +3,4 @@
  Leaflet.hotline, a Leaflet plugin for drawing gradients along polylines.
  https://github.com/iosphere/Leaflet.hotline/
 */
-!function(t,i){"function"==typeof define&&define.amd?define(["leaflet"],i):"object"==typeof exports?module.exports=i:i(t.L)}(this,function(t){if(t.Hotline)return t;var i=function(t){if(!(this instanceof i))return new i(t);var e={0:"green",.5:"yellow",1:"red"};this._canvas=t="string"==typeof t?document.getElementById(t):t,this._ctx=t.getContext("2d"),this._width=t.width,this._height=t.height,this._weight=5,this._outlineWidth=1,this._outlineColor="black",this._min=0,this._max=1,this._data=[],this.palette(e)};i.prototype={width:function(t){return this._width=t,this},height:function(t){return this._height=t,this},weight:function(t){return this._weight=t,this},outlineWidth:function(t){return this._outlineWidth=t,this},outlineColor:function(t){return this._outlineColor=t,this},palette:function(t){var i=document.createElement("canvas"),e=i.getContext("2d"),n=e.createLinearGradient(0,0,0,256);i.width=1,i.height=256;for(var o in t)n.addColorStop(o,t[o]);return e.fillStyle=n,e.fillRect(0,0,1,256),this._palette=e.getImageData(0,0,1,256).data,this},min:function(t){return this._min=t,this},max:function(t){return this._max=t,this},data:function(t){return this._data=t,this},add:function(t){return this._data.push(t),this},draw:function(){var t=this._ctx;return t.globalCompositeOperation="source-over",t.lineCap="round",this._drawOutline(t),this._drawHotline(t),this},getRGBForValue:function(t){var i=Math.min(Math.max((t-this._min)/(this._max-this._min),0),.999),e=4*Math.floor(256*i);return[this._palette[e],this._palette[e+1],this._palette[e+2]]},_drawOutline:function(t){var i,e,n,o,h,r,s;if(this._outlineWidth)for(i=0,n=this._data.length;i<n;i++)for(o=this._data[i],t.lineWidth=this._weight+2*this._outlineWidth,e=1,h=o.length;e<h;e++)r=o[e-1],s=o[e],t.strokeStyle=this._outlineColor,t.beginPath(),t.moveTo(r.x,r.y),t.lineTo(s.x,s.y),t.stroke()},_drawHotline:function(t){var i,e,n,o,h,r,s,l,a,u;for(t.lineWidth=this._weight,i=0,n=this._data.length;i<n;i++)for(o=this._data[i],e=1,h=o.length;e<h;e++)r=o[e-1],s=o[e],l=t.createLinearGradient(r.x,r.y,s.x,s.y),a=this.getRGBForValue(r.z),u=this.getRGBForValue(s.z),l.addColorStop(0,"rgb("+a.join(",")+")"),l.addColorStop(1,"rgb("+u.join(",")+")"),t.strokeStyle=l,t.beginPath(),t.moveTo(r.x,r.y),t.lineTo(s.x,s.y),t.stroke()}};var e=t.Canvas.extend({_initContainer:function(){t.Canvas.prototype._initContainer.call(this),this._hotline=new i(this._container)},_update:function(){t.Canvas.prototype._update.call(this),this._hotline.width(this._container.width),this._hotline.height(this._container.height)},_updatePoly:function(t){if(this._drawing){var i=t._parts;i.length&&(this._updateOptions(t),this._hotline.data(i).draw())}},_updateOptions:function(t){null!=t.options.min&&this._hotline.min(t.options.min),null!=t.options.max&&this._hotline.max(t.options.max),null!=t.options.weight&&this._hotline.weight(t.options.weight),null!=t.options.outlineWidth&&this._hotline.outlineWidth(t.options.outlineWidth),null!=t.options.outlineColor&&this._hotline.outlineColor(t.options.outlineColor),t.options.palette&&this._hotline.palette(t.options.palette)}}),n=function(i){return t.Browser.canvas?new e(i):null},o={clipSegment:function(i,e,n,o,h){var r,s,l,a=o?this._lastCode:t.LineUtil._getBitCode(i,n),u=t.LineUtil._getBitCode(e,n);for(this._lastCode=u;;){if(!(a|u))return[i,e];if(a&u)return!1;r=a||u,s=t.LineUtil._getEdgeIntersection(i,e,r,n,h),l=t.LineUtil._getBitCode(s,n),r===a?(s.z=i.z,i=s,a=l):(s.z=e.z,e=s,u=l)}}};return t.Hotline=t.Polyline.extend({statics:{Renderer:e,renderer:n},options:{renderer:n(),min:0,max:1,palette:{0:"green",.5:"yellow",1:"red"},weight:5,outlineColor:"black",outlineWidth:1},getRGBForValue:function(t){return this._renderer._hotline.getRGBForValue(t)},_projectLatlngs:function(i,e,n){var o,h,r=i[0]instanceof t.LatLng,s=i.length;if(r){for(h=[],o=0;o<s;o++)h[o]=this._map.latLngToLayerPoint(i[o]),h[o].z=i[o].alt,n.extend(h[o]);e.push(h)}else for(o=0;o<s;o++)this._projectLatlngs(i[o],e,n)},_clipPoints:function(){if(this.options.noClip)return void(this._parts=this._rings);this._parts=[];var t,i,e,n,h,r,s,l=this._parts,a=this._renderer._bounds;for(t=0,e=0,n=this._rings.length;t<n;t++)for(s=this._rings[t],i=0,h=s.length;i<h-1;i++)r=o.clipSegment(s[i],s[i+1],a,i,!0),r&&(l[e]=l[e]||[],l[e].push(r[0]),r[1]===s[i+1]&&i!==h-2||(l[e].push(r[1]),e++))},_clickTolerance:function(){return this.options.weight/2+this.options.outlineWidth+(t.Browser.touch?10:0)}}),t.hotline=function(i,e){return new t.Hotline(i,e)},t});
+(function(a,b){"function"==typeof define&&define.amd?define(["leaflet"],b):"object"==typeof exports?module.exports=b:b(a.L)})(this,function(c){if(c.Hotline)return c;var a=function(b){if(!(this instanceof a))return new a(b);this._canvas=b="string"==typeof b?document.getElementById(b):b,this._ctx=b.getContext("2d"),this._width=b.width,this._height=b.height,this._weight=5,this._outlineWidth=1,this._outlineColor="black",this._min=0,this._max=1,this._data=[],this.palette({0:"green",.5:"yellow",1:"red"})};a.prototype={width:function(a){return this._width=a,this},height:function(a){return this._height=a,this},weight:function(a){return this._weight=a,this},outlineWidth:function(a){return this._outlineWidth=a,this},outlineColor:function(a){return this._outlineColor=a,this},palette:function(a){var b=document.createElement("canvas"),c=b.getContext("2d"),d=c.createLinearGradient(0,0,0,256);for(var e in b.width=1,b.height=256,a)d.addColorStop(e,a[e]);return c.fillStyle=d,c.fillRect(0,0,1,256),this._palette=c.getImageData(0,0,1,256).data,this},min:function(a){return this._min=a,this},max:function(a){return this._max=a,this},data:function(a){return this._data=a,this},add:function(a){return this._data.push(a),this},draw:function(){var a=this._ctx;return a.globalCompositeOperation="source-over",a.lineCap="round",this._drawOutline(a),this._drawHotline(a),this},getRGBForValue:function(a){var b=Math.min(Math.max((a-this._min)/(this._max-this._min),0),.999),c=4*Math.floor(256*b);return[this._palette[c],this._palette[c+1],this._palette[c+2],this._palette[c+3]/255]},_drawOutline:function(a){var b,c,d,e,f,g,h;if(this._outlineWidth){a.save();const i=[this._weight,this._weight+2*this._outlineWidth],j=["source-over","source-out"],k=["white",this._outlineColor];for(let l=0;2>l;l++){for(a.strokeStyle=k[l],a.lineWidth=i[l],a.globalCompositeOperation=j[l],a.beginPath(),(b=0,d=this._data.length);b<d;b++)for(e=this._data[b],c=1,f=e.length;c<f;c++)g=e[c-1],h=e[c],a.moveTo(g.x,g.y),a.lineTo(h.x,h.y);a.stroke()}a.restore()}},_drawHotline:function(a){var b,c,d,e,f,g,h,k,l,m;for(a.save(),a.lineWidth=this._weight,(b=0,d=this._data.length);b<d;b++)for(e=this._data[b],c=1,f=e.length;c<f;c++)g=e[c-1],h=e[c],k=a.createLinearGradient(g.x,g.y,h.x,h.y),l=this.getRGBForValue(g.z),m=this.getRGBForValue(h.z),k.addColorStop(0,"rgb("+l.join(",")+")"),k.addColorStop(1,"rgb("+m.join(",")+")"),a.strokeStyle=k,a.beginPath(),a.moveTo(g.x,g.y),a.lineTo(h.x,h.y),a.stroke();a.restore()}};var b=c.Canvas.extend({_initContainer:function(){c.Canvas.prototype._initContainer.call(this),this._hotline=new a(this._container)},_update:function(){c.Canvas.prototype._update.call(this),this._hotline.width(this._container.width),this._hotline.height(this._container.height)},_updatePoly:function(a){if(this._drawing){var b=a._parts;b.length&&(this._updateOptions(a),this._hotline.data(b).draw())}},_updateOptions:function(a){null!=a.options.min&&this._hotline.min(a.options.min),null!=a.options.max&&this._hotline.max(a.options.max),null!=a.options.weight&&this._hotline.weight(a.options.weight),null!=a.options.outlineWidth&&this._hotline.outlineWidth(a.options.outlineWidth),null!=a.options.outlineColor&&this._hotline.outlineColor(a.options.outlineColor),a.options.palette&&this._hotline.palette(a.options.palette)}}),d=function(a){return c.Browser.canvas?new b(a):null},e={clipSegment:function(d,e,f,g,h){var i,j,k,l=g?this._lastCode:c.LineUtil._getBitCode(d,f),m=c.LineUtil._getBitCode(e,f);for(this._lastCode=m;;){if(!(l|m))return[d,e];if(l&m)return!1;i=l||m,j=c.LineUtil._getEdgeIntersection(d,e,i,f,h),k=c.LineUtil._getBitCode(j,f),i===l?(j.z=d.z,d=j,l=k):(j.z=e.z,e=j,m=k)}}};return c.Hotline=c.Polyline.extend({statics:{Renderer:b,renderer:d},options:{renderer:d(),min:0,max:1,palette:{0:"green",.5:"yellow",1:"red"},weight:5,outlineColor:"black",outlineWidth:1},getRGBForValue:function(a){return this._renderer._hotline.getRGBForValue(a)},_projectLatlngs:function(a,b,d){var e,f,g=a[0]instanceof c.LatLng,h=a.length;if(g){for(f=[],e=0;e<h;e++)f[e]=this._map.latLngToLayerPoint(a[e]),f[e].z=a[e].alt,d.extend(f[e]);b.push(f)}else for(e=0;e<h;e++)this._projectLatlngs(a[e],b,d)},_clipPoints:function(){if(this.options.noClip)return void(this._parts=this._rings);this._parts=[];var a,b,c,d,f,g,h,l=this._parts,m=this._renderer._bounds;for(a=0,c=0,d=this._rings.length;a<d;a++)for(h=this._rings[a],b=0,f=h.length;b<f-1;b++)(g=e.clipSegment(h[b],h[b+1],m,b,!0),!!g)&&(l[c]=l[c]||[],l[c].push(g[0]),(g[1]!==h[b+1]||b===f-2)&&(l[c].push(g[1]),c++))},_clickTolerance:function(){return this.options.weight/2+this.options.outlineWidth+(c.Browser.touch?10:0)}}),c.hotline=function(a,b){return new c.Hotline(a,b)},c});
diff --git a/src/leaflet.hotline.js b/src/leaflet.hotline.js
index a64b608..453c2a2 100644
--- a/src/leaflet.hotline.js
+++ b/src/leaflet.hotline.js
@@ -201,7 +201,8 @@
 			return [
 				this._palette[paletteIndex],
 				this._palette[paletteIndex + 1],
-				this._palette[paletteIndex + 2]
+				this._palette[paletteIndex + 2],
+				this._palette[paletteIndex + 3] / 255.0
 			];
 		},
 
@@ -213,21 +214,28 @@
 			var i, j, dataLength, path, pathLength, pointStart, pointEnd;
 
 			if (this._outlineWidth) {
-				for (i = 0, dataLength = this._data.length; i < dataLength; i++) {
-					path = this._data[i];
-					ctx.lineWidth = this._weight + 2 * this._outlineWidth;
-
-					for (j = 1, pathLength = path.length; j < pathLength; j++) {
-						pointStart = path[j - 1];
-						pointEnd = path[j];
-
-						ctx.strokeStyle = this._outlineColor;
-						ctx.beginPath();
-						ctx.moveTo(pointStart.x, pointStart.y);
-						ctx.lineTo(pointEnd.x, pointEnd.y);
-						ctx.stroke();
+				ctx.save();
+				const lws = [this._weight, this._weight + 2 * this._outlineWidth];
+				const gcos = ['source-over', 'source-out'];
+				const clrs = ['white', this._outlineColor];
+				for (let w = 0; w < 2; w++) {
+					ctx.strokeStyle = clrs[w];
+					ctx.lineWidth = lws[w];
+					ctx.globalCompositeOperation = gcos[w];
+					ctx.beginPath();
+					for (i = 0, dataLength = this._data.length; i < dataLength; i++) {
+						path = this._data[i];
+						for (j = 1, pathLength = path.length; j < pathLength; j++) {
+							pointStart = path[j - 1];
+							pointEnd = path[j];
+
+							ctx.moveTo(pointStart.x, pointStart.y);
+							ctx.lineTo(pointEnd.x, pointEnd.y);
+						}
 					}
+					ctx.stroke();
 				}
+				ctx.restore();
 			}
 		},
 
@@ -239,6 +247,7 @@
 			var i, j, dataLength, path, pathLength, pointStart, pointEnd,
 					gradient, gradientStartRGB, gradientEndRGB;
 
+			ctx.save();
 			ctx.lineWidth = this._weight;
 
 			for (i = 0, dataLength = this._data.length; i < dataLength; i++) {
@@ -262,6 +271,7 @@
 					ctx.stroke();
 				}
 			}
+			ctx.restore();
 		}
 	};
 
