Canvas: Heatmap

Heatmap is a visual representation of data in the form of color gradients. The below example explains how to create a heatmap using I2Djs canvas.

Layer Creation:

let renderer = i2d.canvasLayer('#myCanvas', {}, {});

Asset 1: Circle with a gradient fill. It will be an offline canvas instance, which will be used in rendering the heat map. Every data

// Offline canvaslayer for radial gradient. Set pixelRadio to 1 and size to [100, 100]
var radialGrad = canvasAPI.canvasLayer(null,{}, {});
        radialGrad.setPixelRatio(1);
        radialGrad.setSize(100, 100);
        
var radialGradient = radialGrad.createRadialGradient({
                innerCircle: { x: 50, y: 50, r: 0 },
                outerCircle: { x: 50, y: 50, r: 50 },
                mode: 'percent',
                colorStops: [{ color: 'rgba(0, 0, 0, 0.1)', value: 0 },
                    { color: 'rgba(0, 0, 0, 0)', value: 100 }]
            });
   
   
// Rendering circle with radius 50 and radialGradient fill.
    radialGrad.createEl({
                    el:'circle',
                    attr:{
                        r: 50, cx: 50, cy: 50
                    },
                    style:{
                        fillStyle: radialGradient
                    }
                });
    
    
// Since its a offline canvas, it needs to be executed manually.
    radialGrad.execute();

Asset 2:

/*** Offline canvaslayer for getting pixel data of linear colors.
// Set pixelRadio to 1 and size to [100, 100] ***/
var LinearGrad = canvasAPI.canvasLayer(null,{}, {});
        LinearGrad.setPixelRatio(1);
        LinearGrad.setSize(256, 1);

// Linear gradient.
var linearGradient = LinearGrad.createLinearGradient({
            x1: 0, y1: 0, x2: 255, y2: 0,
            mode: 'absolute',
            colorStops: [
                { color: 'rgba(255, 255, 255, 255)', value: 0 },
                { color: 'rgba(0, 0, 122, 255)', value: 0.25 },
                { color: 'rgba(0, 200, 0, 1)', value: 0.50 },
                { color: 'rgba(200, 200, 0, 1)', value: 0.75 },
                { color: 'rgba(255, 0, 0, 1)', value: 1 }
            ]
        });

// Rendering rect with width: 256 and linearGradient fill
    LinearGrad.createEl({
            el: 'rect',
            attr: {
                x: 0, y: 0, width: 256, height: 1
            },
            style: {
                fillStyle: linearGradient
            }
        });

// Since its a offline canvas, it needs to be executed manually.
    LinearGrad.execute();

let gradPallet = LinearGrad.getPixels(0, 0, 256, 1).data;

Once all our assets are ready, we draw a circular gradient canvas image for every data point to the invisible canvas.

//*** Once all our assets are ready, 
/ we draw circular gradient canvas 
/ image for every data point to the
/ invisible canvas. ***//

//*** after rendering image, execute
/ maually so that pixels will be 
/ avaiable immediatly. ***//

renderer_.createEl({
                el:'image',
                attr:{
                    x: e.x - 50,
                    y: e.y - 50,
                    src: radialGrad
                }
            }).execute();
            
            
/*** fetch the pixels from the newly rendered area and color it  ***/

let rawPixels = renderer_.getPixels(e.x - 50, e.y - 50, radialGrad.width, radialGrad.height);
let pixeldata = rawPixels.data;
    for (let i = 3, len = pixeldata.length; i < len; i += 4) {
        pixeldata[i - 1] = gradPallet[pixeldata[i] * 4 + 2];
        pixeldata[i - 2] = gradPallet[pixeldata[i] * 4 + 1];
        pixeldata[i - 3] = gradPallet[pixeldata[i] * 4];
    }
    
/*** Put the pixels to the visible canvas layer ***/

renderer_2.putPixels(rawPixels, e.x - 50, e.y - 50);