Black to Transparent Background about heatcanvas

[ankit213]

I have used this library, I am creating body image using canvas then I am creating heat map using this library but heat map removed my original image , so please help me out.

Before Heat Map

After Heat Map

[sunng87]

@ankit213 I guess your base image is rendered in the same canvas with the heatmap? It's overwrite by heatmap. Consider using a dedicated canvas for heatmap.

[sunng87]

Thanks for using HeatCanvas.

I think you can override the defaultValue2Color function to make your graph better rendered. Define your function and pass it to render as the third parameter. Due to limited use case, I don't have a "best" function that may work for you immediately.

I am getting pretty busy so I don't have enough time for this. If you have any catch when using HeatCanvas, feedback are welcomed. Thanks very much.

[AndyMason75]

I needed the same thing, didn't take long to figure out, try this:

 var heatmap = new 
                L.TileLayer.HeatCanvas({}, {
                    'step': 0.5,
                    'degree': HeatCanvas.LINEAR,
                    'opacity': 0.7,
                    'bgcolor': [255, 255, 255, 0],
                    'colorscheme': function(value) {
                        // create a steeper slope for alpha channel to get to full saturation quickly
                        var alpha = value * 4;
                        var alphaCeil = alpha > 1 ? 1 : alpha;
                        var h = (1 - value);
                        var l = 0.5;
                        var s = 1;
                        var a = alphaCeil;
                        return [h, s, l, a];
                    }
                });

You'll also have to implement passing 'bgcolor' through the leaflet helper to the base HeatCanvas otherwise you'll still get a semi-transparent black background.

[sidequestlegend]

This is really quite old now but I found a neat way to get good results. The trick is to apply the value to the alpha channel.

               heatmap.bgcolor=[255, 255, 255, 0];
                var colorscheme = function(value){
                    var h = (1 - value);
                    var l = value * 0.6;
                    var s = 0.8;
                    var a = value * 0.98; // here is what i changed from the default
                    return [h, s, l, a];
                }
                heatmap.render(1/*step*/, 1/*degree*/, colorscheme);

play with the multiplier (0.98 in the above example) to get your desired alpha in the same way you change the step or degree.