From cfc06b7d358268153d7ad884943e37ed3400d4f2 Mon Sep 17 00:00:00 2001 From: Sunny Date: Mon, 26 Jan 2015 19:02:03 +0800 Subject: [PATCH] Add double buffered canvas support Use onscreen canvas rendering heatmap may cause flicker. To fix this issue, use double buffered canvas instead. --- simpleheat.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/simpleheat.js b/simpleheat.js index 1f7a36a..3b4ced9 100644 --- a/simpleheat.js +++ b/simpleheat.js @@ -16,6 +16,11 @@ function simpleheat(canvas) { this._width = canvas.width; this._height = canvas.height; + this._bufferedCanvas = document.createElement('canvas'); + this._bufferedCanvas.width = canvas.width; + this._bufferedCanvas.height = canvas.height; + this._bufferedCtx = this._bufferedCanvas.getContext('2d'); + this._max = 1; this._data = []; } @@ -103,20 +108,20 @@ simpleheat.prototype = { this.gradient(this.defaultGradient); } - var ctx = this._ctx; + var ctx = this._ctx, bufferedCtx = this._bufferedCtx; - ctx.clearRect(0, 0, this._width, this._height); + bufferedCtx.clearRect(0, 0, this._width, this._height); // 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.max(p[2] / this._max, minOpacity === undefined ? 0.05 : minOpacity); - ctx.drawImage(this._circle, p[0] - this._r, p[1] - this._r); + bufferedCtx.globalAlpha = Math.max(p[2] / this._max, minOpacity === undefined ? 0.05 : minOpacity); + bufferedCtx.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); + var colored = bufferedCtx.getImageData(0, 0, this._width, this._height); this._colorize(colored.data, this._grad); ctx.putImageData(colored, 0, 0);