Add fallback for roundRect for older browsers (#9)

* Add fallback for roundRect for older browsers

* Linting

Author: samhirtarif

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "react-audio-visualize",
   "private": false,
-  "version": "1.1.2",
+  "version": "1.1.3",
   "license": "MIT",
   "author": "",
   "repository": {

package.json

@@ -101,7 +101,13 @@ export const draw = (
     const h = amp + dp.max - y;
 
     ctx.beginPath();
-    ctx.roundRect(x, y, w, h, 50);
-    ctx.fill();
+    if (ctx.roundRect) {
+      // making sure roundRect is supported by the browser
+      ctx.roundRect(x, y, w, h, 50);
+      ctx.fill();
+    } else {
+      // fallback for browsers that do not support roundRect
+      ctx.fillRect(x, y, w, h);
+    }
   });
 };

src/AudioVisualizer/utils.ts

@@ -64,7 +64,13 @@ export const draw = (
     const h = dp || 1;
 
     ctx.beginPath();
-    ctx.roundRect(x, y, w, h, 50);
-    ctx.fill();
+    if (ctx.roundRect) {
+      // making sure roundRect is supported by the browser
+      ctx.roundRect(x, y, w, h, 50);
+      ctx.fill();
+    } else {
+      // fallback for browsers that do not support roundRect
+      ctx.fillRect(x, y, w, h);
+    }
   });
 };