Change custom element name to ce-squircle

Author: tim-harding

README.md

@@ -9,7 +9,7 @@ magic](https://tim-harding.github.io/squircle/).
 
 ### CSS
 
-First, register the squircle web worker. 
+First, register the squircle web worker.
 
 ```js
 import { register } from "superellipse-squircle";
@@ -19,15 +19,16 @@ register();
 Now you can use `paint(squircle)` as a image source in CSS. Usually that will be
 `background: paint(squircle);`, in which case you can use the provided
 `squircle` class. This includes a fallback to normal rounded rectangles when CSS
-Houdini isn't available. 
+Houdini isn't available.
 
 ```html
 <div
   class="squircle"
   style="
     --squircle-border-radius: 1rem;
     --squircle-background-color: black;"
-></div>;
+></div>
+;
 ```
 
 These properties control the squircle drawing:
@@ -59,19 +60,19 @@ squircles on all platforms, you can use the web component instead. It will add
 an HTML5 `<canvas>` to draw with when the Paint API isn't available.
 
 ```js
-import { createCustomElement } from 'superellipse-squircle';
+import { createCustomElement } from "superellipse-squircle";
 createCustomElement();
 ```
 
 ```html
-<th-squircle
+<ce-squircle
   background-color="rgba(64, 128, 192, 0.5)"
   border-radius="16"
   border-width="4"
   border-color="black"
 >
   Hello, world!
-</th-squircle>
+</ce-squircle>
 ```
 
 ### Canvas
@@ -86,13 +87,22 @@ import { draw, paint } from "superellipse-squircle";
 draw(canvasContext, posX, posY, width, height, borderRadius);
 
 // Draw the squircle with stroke and fill
-paint(canvasContext, posX, posY, width, height, borderRadius, 
-  borderWidth, fillColor, borderColor);
+paint(
+  canvasContext,
+  posX,
+  posY,
+  width,
+  height,
+  borderRadius,
+  borderWidth,
+  fillColor,
+  borderColor,
+);
 ```
 
 ### SVG
 
-You can create a string that is compatible with SVG `path` elements. 
+You can create a string that is compatible with SVG `path` elements.
 
 ```svg
 <svg viewBox="0 0 512 512">
@@ -104,6 +114,6 @@ You can create a string that is compatible with SVG `path` elements.
 import { path } from "superellipse-squircle";
 
 const d = path(0, 0, 512, 512, myRadius);
-const path = document.getElementById('my-path');
+const path = document.getElementById("my-path");
 path.d = d;
 ```

index.html

@@ -37,18 +37,18 @@
     <svg viewBox="0 0 512 256" width="512" height="256">
       <path id="squircle-svg" fill="black"></path>
     </svg>
-    <my-squircle
+    <ce-squircle
       background-color="rgb(255, 127, 63)"
       border-radius="16"
       border-width="4"
       border-color="rgb(63, 127, 255)"
-    ></my-squircle>
+    ></ce-squircle>
 
     <script type="module">
       import { register, path, createCustomElement } from "@";
 
       register();
-      createCustomElement("my-squircle");
+      createCustomElement();
 
       const svg = document.getElementById("squircle-svg");
       const d = path(0, 0, 512, 256, 32);

pages/index.html

@@ -82,7 +82,7 @@ <h1>Squircle</h1>
         <th-drag-area>
           <th-corner side="top-left"></th-corner>
           <th-corner side="bottom-right"></th-corner>
-          <th-squircle></th-squircle>
+          <ce-squircle></ce-squircle>
         </th-drag-area>
 
         <form>

pages/public/style.css

@@ -357,7 +357,7 @@ main {
   grid-template-areas: "tester";
 }
 
-th-squircle {
+ce-squircle {
   display: grid;
   contain: strict;
   pointer-events: none;
@@ -387,7 +387,7 @@ th-drag-area {
   background-color: var(--mantle);
   border: 1px solid var(--crust);
 
-  & > th-squircle {
+  & > ce-squircle {
     position: absolute;
   }
 }

pages/src/drag-area.js

@@ -31,7 +31,7 @@ export class DragArea extends HTMLElement {
     this._r = w - SIDE_OFFSET;
     this._b = h - SIDE_OFFSET;
 
-    this._squircle = this.querySelector("th-squircle");
+    this._squircle = this.querySelector("ce-squircle");
     this._updateSquircleCorners();
 
     const observer = new ResizeObserver((entries) => {

pages/src/main.js

@@ -7,7 +7,7 @@ import { ThemeButton } from "pages/theme-button.js";
 
 function main() {
   register();
-  createCustomElement("th-squircle");
+  createCustomElement();
   customElements.define("th-tester", Tester);
   customElements.define("th-drag-area", DragArea);
   customElements.define("th-control", Control);

pages/src/tester.js

@@ -15,7 +15,7 @@ export class Tester extends HTMLElement {
   }
 
   connectedCallback() {
-    this._squircle = this.querySelector("th-squircle");
+    this._squircle = this.querySelector("ce-squircle");
   }
 
   /**

src/index.js

@@ -33,25 +33,22 @@ export const register = registerInner();
  *
  * Usage:
  * ```js
- * // No argument defaults to th-squircle
- * createCustomElement('my-squircle')
+ * createCustomElement()
  * ```
  * ```html
- * <my-squircle
+ * <ce-squircle
  *     background-color="#deadbeef"
  *     border-radius="16"
  *     border-width="4"
  *     border-color="#cafebabe"
- * ></my-squircle>
+ * ></ce-squircle>
  * ```
- *
- * @param {string} [name='th-squircle'] HTML element tag
  */
-export function createCustomElement(name = "th-squircle") {
-  if (customElements.get(name)) return;
+export function createCustomElement() {
+  if (customElements.get("ce-squircle")) return;
   register();
   /* @ts-ignore */
   const isPaintSupported = !!CSS.paintWorklet;
   const component = isPaintSupported ? SquircleHoudini : SquircleCanvas;
-  customElements.define(name, component);
+  customElements.define("ce-squircle", component);
 }

src/squircle-canvas.js

@@ -24,10 +24,7 @@ export default class SquircleCanvas extends HTMLElement {
     const canvas = document.createElement("canvas");
     this.appendChild(canvas);
 
-    const ctx = canvas.getContext("2d", {
-      // TODO: Do I need to test support first?
-      colorSpace: "display-p3",
-    });
+    const ctx = canvas.getContext("2d", {});
 
     if (ctx === null) {
       console.error("Could not get canvas 2D context");
@@ -50,10 +47,10 @@ export default class SquircleCanvas extends HTMLElement {
           this._width = rect.width;
           this._height = rect.height;
         }
-        this._width = Math.round(this._width);
-        this._height = Math.round(this._height);
-        canvas.width = Math.round(this._width);
-        canvas.height = Math.round(this._height);
+        this._width = Math.floor(this._width);
+        this._height = Math.floor(this._height);
+        canvas.width = Math.floor(this._width);
+        canvas.height = Math.floor(this._height);
         ctx.scale(devicePixelRatio, devicePixelRatio);
         this._draw();
       }