Added TS support and strict JS mode error reporting (e.g. Vue +vite)

README.md

@@ -3,11 +3,17 @@ Dynamic Heatmaps for the Web.
 
 [<img src="http://www.patrick-wied.at/static/heatmapjs/assets/img/heatmapjs-examples-docs-banner.jpg" width="100%">](http://www.patrick-wied.at/static/heatmapjs/?utm_source=gh "View the heatmap.js website with usage examples, showcases, best practises, plugins ( googlemaps heatmap, leaflet) and more.")
 
+## mars3d update
+- fix: An error "Cannot assign to read only property 'data' of object '#<ImageData>'"
+- add: Added support for typescript in index.d.ts
+- The NPM package was released  `@mars3d/heatmap.js`
+
+
 ## How to get started
 
 The fastest way to get started is to install heatmap.js with bower. Just run the following command:
 
-`bower install heatmap.js-amd`
+`bower install @mars3d/heatmap.js-amd`
 
 This will download the latest working version of heatmap.js and put it in your bower_components folder.
 
@@ -20,7 +26,7 @@ The file you're ultimately looking for is **heatmap.js** or **heatmap.min.js**
 
 heatmap.js is also hosted on npm:
 
-`npm install heatmap.js`
+`npm install @mars3d/heatmap.js`
 
 
 

build/heatmap.js

@@ -251,7 +251,7 @@ var Canvas2dRenderer = (function Canvas2dRendererClosure() {
   var _getColorPalette = function(config) {
     var gradientConfig = config.gradient || config.defaultGradient;
     var paletteCanvas = document.createElement('canvas');
-    var paletteCtx = paletteCanvas.getContext('2d');
+    var paletteCtx = paletteCanvas.getContext('2d', { willReadFrequently: true });
 
     paletteCanvas.width = 256;
     paletteCanvas.height = 1;
@@ -269,7 +269,7 @@ var Canvas2dRenderer = (function Canvas2dRendererClosure() {
 
   var _getPointTemplate = function(radius, blurFactor) {
     var tplCanvas = document.createElement('canvas');
-    var tplCtx = tplCanvas.getContext('2d');
+    var tplCtx = tplCanvas.getContext('2d', { willReadFrequently: true });
     var x = radius;
     var y = radius;
     tplCanvas.width = tplCanvas.height = radius*2;
@@ -340,8 +340,8 @@ var Canvas2dRenderer = (function Canvas2dRendererClosure() {
     this._width = canvas.width = shadowCanvas.width = config.width || +(computed.width.replace(/px/,''));
     this._height = canvas.height = shadowCanvas.height = config.height || +(computed.height.replace(/px/,''));
 
-    this.shadowCtx = shadowCanvas.getContext('2d');
-    this.ctx = canvas.getContext('2d');
+    this.shadowCtx = shadowCanvas.getContext('2d', { willReadFrequently: true });
+    this.ctx = canvas.getContext('2d', { willReadFrequently: true });
 
     // @TODO:
     // conditional wrapper
@@ -524,7 +524,6 @@ var Canvas2dRenderer = (function Canvas2dRendererClosure() {
 
       }
 
-      img.data = imgData;
       this.ctx.putImageData(img, x, y);
 
       this._renderBoundaries = [1000, 1000, 0, 0];