grammar checking

docs/js/custom-element/api/README.md

@@ -303,8 +303,8 @@ For coloring purposes, there is also the `randomColor` function:
 
 For temporary work, where you might want to change some properties and then revert to the previous state, there are two functions available:
 
-- `cacheStyle()` cache the current collection of properties. This uses a stack, with each call adding a new "snapshot" on the stack.
-- `restoreStyle()` restore the most recently cached state from the stack.
+- `save()` cache the current collection of properties. This uses a stack, with each call adding a new "snapshot" on the stack.
+- `restore()` restore the most recently cached state from the stack.
 
 ### Coordinate transform function
 

docs/js/custom-element/api/base-api.js

@@ -41,7 +41,7 @@ class BaseAPI {
     if (canvasBuildFunction) {
       const { canvas, ctx } = canvasBuildFunction(width, height);
       this.canvas = canvas;
-      this.ctx = enhanceContext(ctx);
+      this.ctx = ctx;
       this.preSized = true;
     } else {
       this.canvas = document.createElement(`canvas`);
@@ -223,7 +223,7 @@ class BaseAPI {
       this.canvas.width = this.width;
       this.canvas.style.width = `${this.width}px`;
       this.canvas.height = this.height;
-      this.ctx = enhanceContext(this.canvas.getContext(`2d`));
+      this.ctx = this.canvas.getContext(`2d`);
     }
   }
 
@@ -259,34 +259,4 @@ class BaseAPI {
   }
 }
 
-// Ensure there are cacheStyle/restoreStyle functions
-// on the Canvas context, so that it's trivial to make
-// temporary changes.
-function enhanceContext(ctx) {
-  const styles = [];
-  ctx.cacheStyle = () => {
-    let m = ctx.currentTransform || ctx.getTransform();
-    let e = {
-      strokeStyle: ctx.strokeStyle,
-      fillStyle: ctx.fillStyle,
-      lineWidth: ctx.lineWidth,
-      textAlign: ctx.textAlign,
-      transform: [m.a, m.b, m.c, m.d, m.e, m.f],
-      font: ctx.font,
-      shadowColor: ctx.shadowColor,
-      shadowBlur: ctx.shadowColor,
-    };
-    styles.push(e);
-  };
-  ctx.restoreStyle = () => {
-    const v = styles.pop();
-    Object.keys(v).forEach((k) => {
-      let val = v[k];
-      if (k !== `transform`) ctx[k] = val;
-      else ctx.setTransform(val[0], val[1], val[2], val[3], val[4], val[5]);
-    });
-  };
-  return ctx;
-}
-
 export { BaseAPI };

docs/js/custom-element/api/graphics-api.js

@@ -416,17 +416,17 @@ class GraphicsAPI extends BaseAPI {
   }
 
   /**
-   * Cache all styling values
+   * Save the current state/properties on a stack
    */
-  cacheStyle() {
-    this.ctx.cacheStyle();
+  save() {
+    this.ctx.save();
   }
 
   /**
-   * restore all previous styling values
+   * Restore the most recently saved state/properties from the stack
    */
-  restoreStyle() {
-    this.ctx.restoreStyle();
+  restore() {
+    this.ctx.restore();
   }
 
   /**
@@ -449,19 +449,19 @@ class GraphicsAPI extends BaseAPI {
    * Reset the canvas bitmap to a uniform color.
    */
   clear(color = `white`, preserveTransforms = false) {
-    this.ctx.cacheStyle();
+    this.save();
     this.resetTransform();
     this.ctx.fillStyle = color;
     this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
-    this.ctx.restoreStyle();
+    this.restore();
     if (!preserveTransforms) this.resetTransform();
     if (this._gridParams) {
-      this.ctx.cacheStyle();
+      this.save();
       this.setStroke(this._gridParams.color);
       this.translate(0.5, 0.5);
       this.drawGrid(this._gridParams.size);
       this.translate(-0.5, -0.5);
-      this.ctx.restoreStyle();
+      this.restore();
     }
   }
 
@@ -517,7 +517,7 @@ class GraphicsAPI extends BaseAPI {
       x = x.x;
     }
     const ctx = this.ctx;
-    ctx.cacheStyle();
+    ctx.save();
     if (alignment) {
       ctx.textAlign = alignment;
     }
@@ -527,7 +527,7 @@ class GraphicsAPI extends BaseAPI {
       this.ctx.strokeText(str, x, y);
     }
     this.ctx.fillText(str, x, y);
-    ctx.restoreStyle();
+    ctx.restore();
   }
 
   /**

docs/js/custom-element/api/types/bezier.js

@@ -68,7 +68,7 @@ class Bezier extends Original {
 
   drawCurve(color = `#333`) {
     const ctx = this.ctx;
-    ctx.cacheStyle();
+    ctx.save();
     ctx.strokeStyle = color;
     ctx.beginPath();
     const lut = this.getLUT().slice();
@@ -79,7 +79,7 @@ class Bezier extends Original {
       ctx.lineTo(p.x, p.y);
     }
     ctx.stroke();
-    ctx.restoreStyle();
+    ctx.restore();
   }
 
   drawPoints(labels = true) {
@@ -87,7 +87,7 @@ class Bezier extends Original {
     const api = this.api;
     const ctx = this.ctx;
 
-    ctx.cacheStyle();
+    ctx.save();
     ctx.lineWidth = 2;
     ctx.strokeStyle = `#999`;
     this.points.forEach((p, i) => {
@@ -100,20 +100,20 @@ class Bezier extends Original {
         api.text(`(${x},${y})`, x + 10, y + 10);
       }
     });
-    ctx.restoreStyle();
+    ctx.restore();
   }
 
   drawSkeleton(color = `#555`) {
     const api = this.api;
     const ctx = this.ctx;
-    ctx.cacheStyle();
+    ctx.save();
     const p = this.points;
     api.noFill();
     api.setStroke(color);
     api.start();
     p.forEach((v) => api.vertex(v.x, v.y));
     api.end();
-    ctx.restoreStyle();
+    ctx.restore();
   }
 
   getStrutPoints(t) {
@@ -139,7 +139,7 @@ class Bezier extends Original {
 
     const api = this.api;
     const ctx = api.ctx;
-    ctx.cacheStyle();
+    ctx.save();
     api.noFill();
     api.setStroke(color);
 
@@ -155,7 +155,7 @@ class Bezier extends Original {
       api.end();
       s += n;
     }
-    ctx.restoreStyle();
+    ctx.restore();
 
     return p;
   }
@@ -167,11 +167,11 @@ class Bezier extends Original {
       MX = bbox.x.max,
       MY = bbox.y.max,
       api = this.api;
-    api.cacheStyle();
+    api.save();
     api.noFill();
     api.setStroke(color);
     api.rect(mx, my, MX - mx, MY - my);
-    api.restoreStyle();
+    api.restore();
   }
 }