From 25990612a981d98ee7f7ec4912f5b20a97c10386 Mon Sep 17 00:00:00 2001
From: Berk Ozkutuk <ozkutuk.berk@gmail.com>
Date: Sun, 5 Sep 2021 21:16:27 +0300
Subject: [PATCH 1/2] Add eslint config and fix linter issues

---
 .eslintrc.json         |  29 ++
 .gitignore             |   1 +
 package.json           |   3 +-
 src/Graphics/Canvas.js | 645 ++++++++++++++++++++---------------------
 4 files changed, 354 insertions(+), 324 deletions(-)
 create mode 100644 .eslintrc.json

diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..cb9c786
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,29 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 5
+  },
+  "extends": "eslint:recommended",
+  "env": {
+    "commonjs": true,
+    "browser": true
+  },
+  "rules": {
+    "strict": [2, "global"],
+    "block-scoped-var": 2,
+    "consistent-return": 2,
+    "eqeqeq": [2, "smart"],
+    "guard-for-in": 2,
+    "no-caller": 2,
+    "no-extend-native": 2,
+    "no-loop-func": 2,
+    "no-new": 2,
+    "no-param-reassign": 2,
+    "no-return-assign": 2,
+    "no-unused-expressions": 2,
+    "no-use-before-define": 2,
+    "radix": [2, "always"],
+    "indent": [2, 2],
+    "quotes": [2, "double"],
+    "semi": [2, "always"]
+  }
+}
diff --git a/.gitignore b/.gitignore
index dc9eaee..54cc605 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@ bower_components/
 package-lock.json
 
 /.*
+!/.eslintrc.json
 !/.github
 !/.gitignore
 
diff --git a/package.json b/package.json
index 79ea445..46f4de9 100644
--- a/package.json
+++ b/package.json
@@ -2,9 +2,10 @@
   "private": true,
   "scripts": {
     "clean": "rimraf output && rimraf .pulp-cache",
-    "build": "pulp build -- --censor-lib --strict"
+    "build": "eslint src && pulp build -- --censor-lib --strict"
   },
   "devDependencies": {
+    "eslint": "^7.32.0",
     "pulp": "^15.0.0",
     "purescript-psa": "^0.8.0",
     "rimraf": "^3.0.2"
diff --git a/src/Graphics/Canvas.js b/src/Graphics/Canvas.js
index c1dce61..73b25c9 100644
--- a/src/Graphics/Canvas.js
+++ b/src/Graphics/Canvas.js
@@ -1,598 +1,597 @@
-/* global exports */
 "use strict";
 
 exports.canvasElementToImageSource = function(e) {
-    return e;
+  return e;
 };
 
 exports.tryLoadImageImpl = function (src) {
   return function(e) {
-        return function(f) {
-            return function () {
-                var img = new Image();
-                img.src = src;
-                img.addEventListener("load", function() {
-                    f(img)();
-                }, false);
-                img.addEventListener("error", function(error) {
-                    e();
-                }, false);
-            }
-        }
+    return function(f) {
+      return function () {
+        var img = new Image();
+        img.src = src;
+        img.addEventListener("load", function() {
+          f(img)();
+        }, false);
+        img.addEventListener("error", function() {
+          e();
+        }, false);
+      };
     };
+  };
 };
 
 exports.getCanvasElementByIdImpl = function(id, Just, Nothing) {
-    return function() {
-        var el = document.getElementById(id);
-        if (el && el instanceof HTMLCanvasElement) {
-            return Just(el);
-        } else {
-            return Nothing;
-        }
-    };
+  return function() {
+    var el = document.getElementById(id);
+    if (el && el instanceof HTMLCanvasElement) {
+      return Just(el);
+    } else {
+      return Nothing;
+    }
+  };
 };
 
 exports.getContext2D = function(c) {
-    return function() {
-        return c.getContext('2d');
-    };
+  return function() {
+    return c.getContext("2d");
+  };
 };
 
 exports.getCanvasWidth = function(canvas) {
-    return function() {
-        return canvas.width;
-    };
+  return function() {
+    return canvas.width;
+  };
 };
 
 exports.getCanvasHeight = function(canvas) {
-    return function() {
-        return canvas.height;
-    };
+  return function() {
+    return canvas.height;
+  };
 };
 
 exports.setCanvasWidth = function(canvas) {
-    return function(width) {
-        return function() {
-            canvas.width = width;
-        };
+  return function(width) {
+    return function() {
+      canvas.width = width;
     };
+  };
 };
 
 exports.setCanvasHeight = function(canvas) {
-    return function(height) {
-        return function() {
-            canvas.height = height;
-        };
+  return function(height) {
+    return function() {
+      canvas.height = height;
     };
+  };
 };
 
 exports.canvasToDataURL = function(canvas) {
-    return function() {
-        return canvas.toDataURL();
-    };
+  return function() {
+    return canvas.toDataURL();
+  };
 };
 
 exports.setLineWidth = function(ctx) {
-    return function(width) {
-        return function() {
-            ctx.lineWidth = width;
-        };
+  return function(width) {
+    return function() {
+      ctx.lineWidth = width;
     };
+  };
 };
 
 exports.setLineDash = function(ctx) {
-    return function(dash) {
-        return function() {
-            ctx.setLineDash(dash);
-        };
+  return function(dash) {
+    return function() {
+      ctx.setLineDash(dash);
     };
+  };
 };
 
 exports.setFillStyle = function(ctx) {
-    return function(style) {
-        return function() {
-            ctx.fillStyle = style;
-        };
+  return function(style) {
+    return function() {
+      ctx.fillStyle = style;
     };
+  };
 };
 
 exports.setStrokeStyle = function(ctx) {
-    return function(style) {
-        return function() {
-            ctx.strokeStyle = style;
-        };
+  return function(style) {
+    return function() {
+      ctx.strokeStyle = style;
     };
+  };
 };
 
 exports.setShadowColor = function(ctx) {
-    return function(color) {
-        return function() {
-            ctx.shadowColor = color;
-        };
+  return function(color) {
+    return function() {
+      ctx.shadowColor = color;
     };
+  };
 };
 
 exports.setShadowBlur = function(ctx) {
-    return function(blur) {
-        return function() {
-            ctx.shadowBlur = blur;
-        };
+  return function(blur) {
+    return function() {
+      ctx.shadowBlur = blur;
     };
+  };
 };
 
 exports.setShadowOffsetX = function(ctx) {
-    return function(offsetX) {
-        return function() {
-            ctx.shadowOffsetX = offsetX;
-        };
+  return function(offsetX) {
+    return function() {
+      ctx.shadowOffsetX = offsetX;
     };
+  };
 };
 
 exports.setShadowOffsetY = function(ctx) {
-    return function(offsetY) {
-        return function() {
-            ctx.shadowOffsetY = offsetY;
-        };
+  return function(offsetY) {
+    return function() {
+      ctx.shadowOffsetY = offsetY;
     };
+  };
 };
 
 exports.setMiterLimit = function(ctx) {
-    return function(limit) {
-        return function() {
-            ctx.miterLimit = limit;
-        };
+  return function(limit) {
+    return function() {
+      ctx.miterLimit = limit;
     };
+  };
 };
 
 exports.setLineCapImpl = function(ctx) {
-    return function(cap) {
-        return function() {
-            ctx.lineCap = cap;
-        };
+  return function(cap) {
+    return function() {
+      ctx.lineCap = cap;
     };
+  };
 };
 
 exports.setLineJoinImpl = function(ctx) {
-    return function(join) {
-        return function() {
-            ctx.lineJoin = join;
-        };
+  return function(join) {
+    return function() {
+      ctx.lineJoin = join;
     };
+  };
 };
 
 exports.setGlobalCompositeOperationImpl = function(ctx) {
-    return function(op) {
-        return function() {
-            ctx.globalCompositeOperation = op;
-        };
+  return function(op) {
+    return function() {
+      ctx.globalCompositeOperation = op;
     };
+  };
 };
 
 exports.setGlobalAlpha = function(ctx) {
-    return function(alpha) {
-        return function() {
-            ctx.globalAlpha = alpha;
-        };
+  return function(alpha) {
+    return function() {
+      ctx.globalAlpha = alpha;
     };
+  };
 };
 
 exports.beginPath = function(ctx) {
-    return function() {
-        ctx.beginPath();
-    };
+  return function() {
+    ctx.beginPath();
+  };
 };
 
 exports.stroke = function(ctx) {
-    return function() {
-        ctx.stroke();
-    };
+  return function() {
+    ctx.stroke();
+  };
 };
 
 exports.fill = function(ctx) {
-    return function() {
-        ctx.fill();
-    };
+  return function() {
+    ctx.fill();
+  };
 };
 
 exports.clip = function(ctx) {
-    return function() {
-        ctx.clip();
-    };
+  return function() {
+    ctx.clip();
+  };
 };
 
 exports.lineTo = function(ctx) {
-    return function(x) {
-        return function(y) {
-            return function() {
-                ctx.lineTo(x, y);
-            };
-        };
+  return function(x) {
+    return function(y) {
+      return function() {
+        ctx.lineTo(x, y);
+      };
     };
+  };
 };
 
 exports.moveTo = function(ctx) {
-    return function(x) {
-        return function(y) {
-            return function() {
-                ctx.moveTo(x, y);
-            };
-        };
+  return function(x) {
+    return function(y) {
+      return function() {
+        ctx.moveTo(x, y);
+      };
     };
+  };
 };
 
 exports.closePath = function(ctx) {
-    return function() {
-        ctx.closePath();
-    };
+  return function() {
+    ctx.closePath();
+  };
 };
 
 exports.arc = function(ctx) {
-    return function(a) {
-        return function() {
-            ctx.arc(a.x, a.y, a.radius, a.start, a.end);
-        };
+  return function(a) {
+    return function() {
+      ctx.arc(a.x, a.y, a.radius, a.start, a.end);
     };
+  };
 };
 
 exports.rect = function(ctx) {
-    return function(r) {
-        return function() {
-            ctx.rect(r.x, r.y, r.width, r.height);
-        };
+  return function(r) {
+    return function() {
+      ctx.rect(r.x, r.y, r.width, r.height);
     };
+  };
 };
 
 exports.fillRect = function(ctx) {
-    return function(r) {
-        return function() {
-            ctx.fillRect(r.x, r.y, r.width, r.height);
-        };
+  return function(r) {
+    return function() {
+      ctx.fillRect(r.x, r.y, r.width, r.height);
     };
+  };
 };
 
 exports.strokeRect = function(ctx) {
-    return function(r) {
-        return function() {
-            ctx.strokeRect(r.x, r.y, r.width, r.height);
-        };
+  return function(r) {
+    return function() {
+      ctx.strokeRect(r.x, r.y, r.width, r.height);
     };
+  };
 };
 
 exports.clearRect = function(ctx) {
-    return function(r) {
-        return function() {
-            ctx.clearRect(r.x, r.y, r.width, r.height);
-        };
+  return function(r) {
+    return function() {
+      ctx.clearRect(r.x, r.y, r.width, r.height);
     };
+  };
 };
 
 exports.scale = function(ctx) {
-    return function(t) {
-        return function() {
-            ctx.scale(t.scaleX, t.scaleY);
-        };
+  return function(t) {
+    return function() {
+      ctx.scale(t.scaleX, t.scaleY);
     };
+  };
 };
 
 exports.rotate = function(ctx) {
-    return function(angle) {
-        return function() {
-            ctx.rotate(angle);
-        };
+  return function(angle) {
+    return function() {
+      ctx.rotate(angle);
     };
+  };
 };
 
 exports.translate = function(ctx) {
-    return function(t) {
-        return function() {
-            ctx.translate(t.translateX, t.translateY);
-        };
+  return function(t) {
+    return function() {
+      ctx.translate(t.translateX, t.translateY);
     };
+  };
 };
 
 exports.transform = function(ctx) {
-    return function(t) {
-        return function() {
-            ctx.transform(t.m11, t.m12, t.m21, t.m22, t.m31, t.m32);
-        };
+  return function(t) {
+    return function() {
+      ctx.transform(t.m11, t.m12, t.m21, t.m22, t.m31, t.m32);
     };
+  };
 };
 
 exports.setTransform = function(ctx) {
-    return function(t) {
-        return function() {
-            ctx.setTransform(t.m11, t.m12, t.m21, t.m22, t.m31, t.m32);
-        };
+  return function(t) {
+    return function() {
+      ctx.setTransform(t.m11, t.m12, t.m21, t.m22, t.m31, t.m32);
     };
+  };
 };
 
 exports.textAlignImpl = function(ctx) {
-    return function() {
-        return ctx.textAlign;
-    }
+  return function() {
+    return ctx.textAlign;
+  };
 };
 
 exports.setTextAlignImpl = function(ctx) {
-    return function(textAlign) {
-        return function() {
-            ctx.textAlign = textAlign;
-        }
-    }
+  return function(textAlign) {
+    return function() {
+      ctx.textAlign = textAlign;
+    };
+  };
 };
 
 exports.textBaselineImpl = function (ctx) {
-    return function () {
-        return ctx.textBaseline;
-    }
+  return function () {
+    return ctx.textBaseline;
+  };
 };
 
 exports.setTextBaselineImpl = function (ctx) {
-    return function (textBaseline) {
-        return function () {
-            ctx.textBaseline = textBaseline;
-        }
-    }
+  return function (textBaseline) {
+    return function () {
+      ctx.textBaseline = textBaseline;
+    };
+  };
 };
 
 exports.font = function(ctx) {
-    return function() {
-        return ctx.font;
-    };
+  return function() {
+    return ctx.font;
+  };
 };
 
 exports.setFont = function(ctx) {
-    return function(fontspec) {
-        return function() {
-            ctx.font = fontspec;
-        };
+  return function(fontspec) {
+    return function() {
+      ctx.font = fontspec;
     };
+  };
 };
 
 exports.fillText = function(ctx) {
-    return function(text) {
-        return function(x) {
-            return function(y) {
-                return function() {
-                    ctx.fillText(text, x, y);
-                };
-            };
+  return function(text) {
+    return function(x) {
+      return function(y) {
+        return function() {
+          ctx.fillText(text, x, y);
         };
+      };
     };
+  };
 };
 
 exports.strokeText = function(ctx) {
-    return function(text) {
-        return function(x) {
-            return function(y) {
-                return function() {
-                    ctx.strokeText(text, x, y);
-                };
-            };
+  return function(text) {
+    return function(x) {
+      return function(y) {
+        return function() {
+          ctx.strokeText(text, x, y);
         };
+      };
     };
+  };
 };
 
 exports.measureText = function(ctx) {
-    return function(text) {
-        return function() {
-            return ctx.measureText(text);
-        };
+  return function(text) {
+    return function() {
+      return ctx.measureText(text);
     };
+  };
 };
 
 exports.save = function(ctx) {
-    return function() {
-        ctx.save();
-    };
+  return function() {
+    ctx.save();
+  };
 };
 
 exports.restore = function(ctx) {
-    return function() {
-        ctx.restore();
-    };
+  return function() {
+    ctx.restore();
+  };
 };
 
 exports.imageDataWidth = function(image) {
-    return image.width;
+  return image.width;
 };
 
 exports.imageDataHeight = function(image) {
-    return image.height;
+  return image.height;
 };
 
 exports.imageDataBuffer = function(image) {
-    return image.data;
+  return image.data;
 };
 
 exports.getImageData = function(ctx) {
-    return function(x) {
-        return function(y) {
-            return function(w) {
-                return function(h) {
-                    return function() {
-                        return ctx.getImageData(x, y, w, h);
-                    };
-                };
-            };
+  return function(x) {
+    return function(y) {
+      return function(w) {
+        return function(h) {
+          return function() {
+            return ctx.getImageData(x, y, w, h);
+          };
         };
+      };
     };
+  };
 };
 
 exports.putImageDataFull = function(ctx) {
-    return function(image_data) {
-        return function(x) {
-            return function(y) {
-                return function(dx) {
-                    return function(dy) {
-                        return function(dw) {
-                            return function(dh) {
-                                return function() {
-                                    ctx.putImageData(image_data, x, y, dx, dy, dw, dh);
-                                };
-                            };
-                        };
-                    };
+  return function(image_data) {
+    return function(x) {
+      return function(y) {
+        return function(dx) {
+          return function(dy) {
+            return function(dw) {
+              return function(dh) {
+                return function() {
+                  ctx.putImageData(image_data, x, y, dx, dy, dw, dh);
                 };
+              };
             };
+          };
         };
+      };
     };
+  };
 };
 
 exports.putImageData = function(ctx) {
-    return function(image_data) {
-        return function(x) {
-            return function(y) {
-                return function() {
-                    ctx.putImageData(image_data, x, y);
-                };
-            };
+  return function(image_data) {
+    return function(x) {
+      return function(y) {
+        return function() {
+          ctx.putImageData(image_data, x, y);
         };
+      };
     };
+  };
 };
 
 exports.createImageData = function(ctx) {
-    return function(sw) {
-        return function(sh) {
-            return function() {
-                return ctx.createImageData(sw, sh);
-            };
-        };
+  return function(sw) {
+    return function(sh) {
+      return function() {
+        return ctx.createImageData(sw, sh);
+      };
     };
+  };
 };
 
 exports.createImageDataCopy = function(ctx) {
-    return function(image_data) {
-        return function() {
-            return ctx.createImageData(image_data);
-        };
+  return function(image_data) {
+    return function() {
+      return ctx.createImageData(image_data);
     };
+  };
 };
 
 exports.createImageDataWith = function(arr) {
-    return function(sw) {
-        return function() {
-            return new ImageData(arr, sw);
-        };
+  return function(sw) {
+    return function() {
+      return new ImageData(arr, sw);
     };
+  };
 };
 
 exports.drawImage = function(ctx) {
-    return function(image_source) {
-        return function(dx) {
-            return function(dy) {
-                return function() {
-                    ctx.drawImage(image_source, dx, dy);
-                };
-            };
+  return function(image_source) {
+    return function(dx) {
+      return function(dy) {
+        return function() {
+          ctx.drawImage(image_source, dx, dy);
         };
+      };
     };
+  };
 };
 
 exports.drawImageScale = function(ctx) {
-    return function(image_source) {
-        return function(dx) {
-            return function(dy) {
-                return function(dWidth) {
-                    return function(dHeight) {
-                        return function() {
-                            ctx.drawImage(image_source, dx, dy, dWidth, dHeight);
-                        };
-                    };
-                };
+  return function(image_source) {
+    return function(dx) {
+      return function(dy) {
+        return function(dWidth) {
+          return function(dHeight) {
+            return function() {
+              ctx.drawImage(image_source, dx, dy, dWidth, dHeight);
             };
+          };
         };
+      };
     };
+  };
 };
 
 exports.drawImageFull = function(ctx) {
-    return function(image_source) {
-        return function(sx) {
-            return function(sy) {
-                return function(sWidth) {
-                    return function(sHeight) {
-                        return function(dx) {
-                            return function(dy) {
-                                return function(dWidth) {
-                                    return function(dHeight) {
-                                        return function() {
-                                            ctx.drawImage(image_source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
-                                        };
-                                    };
-                                };
-                            };
-                        };
+  return function(image_source) {
+    return function(sx) {
+      return function(sy) {
+        return function(sWidth) {
+          return function(sHeight) {
+            return function(dx) {
+              return function(dy) {
+                return function(dWidth) {
+                  return function(dHeight) {
+                    return function() {
+                      ctx.drawImage(image_source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
                     };
+                  };
                 };
+              };
             };
+          };
         };
+      };
     };
+  };
 };
 
 exports.createPatternImpl = function(ctx) {
-    return function(img) {
-        return function(repeat) {
-            return function() {
-                return ctx.createPattern(img, repeat);
-            };
-        };
+  return function(img) {
+    return function(repeat) {
+      return function() {
+        return ctx.createPattern(img, repeat);
+      };
     };
+  };
 };
 
 exports.setPatternFillStyle = function(ctx) {
-    return function(pattern) {
-        return function() {
-            ctx.fillStyle = pattern;
-        };
+  return function(pattern) {
+    return function() {
+      ctx.fillStyle = pattern;
     };
+  };
 };
 
 exports.createLinearGradient = function(ctx) {
-    return function(linearGradient) {
-        return function() {
-            return ctx.createLinearGradient(linearGradient.x0, linearGradient.y0, linearGradient.x1, linearGradient.y1);
-        };
+  return function(linearGradient) {
+    return function() {
+      return ctx.createLinearGradient(linearGradient.x0, linearGradient.y0, linearGradient.x1, linearGradient.y1);
     };
+  };
 };
 
 exports.createRadialGradient = function(ctx) {
-    return function(radialGradient) {
-        return function() {
-            return ctx.createRadialGradient(radialGradient.x0, radialGradient.y0, radialGradient.r0, radialGradient.x1, radialGradient.y1, radialGradient.r1);
-        };
+  return function(radialGradient) {
+    return function() {
+      return ctx.createRadialGradient(radialGradient.x0, radialGradient.y0, radialGradient.r0, radialGradient.x1, radialGradient.y1, radialGradient.r1);
     };
+  };
 };
 
 exports.addColorStop = function(gradient) {
-    return function(stop) {
-        return function(color) {
-            return function() {
-                gradient.addColorStop(stop, color);
-            };
-        };
+  return function(stop) {
+    return function(color) {
+      return function() {
+        gradient.addColorStop(stop, color);
+      };
     };
+  };
 };
 
 exports.setGradientFillStyle = function(ctx) {
-    return function(gradient) {
-        return function() {
-            ctx.fillStyle = gradient;
-        };
+  return function(gradient) {
+    return function() {
+      ctx.fillStyle = gradient;
     };
+  };
 };
 
 exports.quadraticCurveTo = function(ctx) {
-    return function(qCurve) {
-        return function() {
-            ctx.quadraticCurveTo(qCurve.cpx, qCurve.cpy, qCurve.x, qCurve.y);
-        };
+  return function(qCurve) {
+    return function() {
+      ctx.quadraticCurveTo(qCurve.cpx, qCurve.cpy, qCurve.x, qCurve.y);
     };
+  };
 };
 
 exports.bezierCurveTo = function(ctx) {
-    return function(bCurve) {
-        return function() {
-            ctx.bezierCurveTo(bCurve.cp1x, bCurve.cp1y, bCurve.cp2x, bCurve.cp2y, bCurve.x, bCurve.y);
-        };
+  return function(bCurve) {
+    return function() {
+      ctx.bezierCurveTo(bCurve.cp1x, bCurve.cp1y, bCurve.cp2x, bCurve.cp2y, bCurve.x, bCurve.y);
     };
+  };
 };

From d1cbc753cf62efcec54083dcefe102ebf3e3144a Mon Sep 17 00:00:00 2001
From: Berk Ozkutuk <ozkutuk.berk@gmail.com>
Date: Sun, 5 Sep 2021 21:21:32 +0300
Subject: [PATCH 2/2] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 768daef..ce6fd4f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ New features:
 Bugfixes:
 
 Other improvements:
+- Added ESLint config and fixed the resulting linter issues (#82)
 
 ## [v5.0.0](https://github.com/purescript-web/purescript-canvas/releases/tag/v5.0.0) - 2021-02-26