fix initial canvas #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

comatory merged 6 commits into master from comatory/fix-initial-canvas

Mar 30, 2025

index.html

-Original file line number
+Diff line change
@@ Expand Up / @@ -84,6 +84,19 @@ <h3>New version available</h3> @@
           </section>
         </main>
         <dialog id="info-dialog">
+          <script type="module">
+            const info = document.getElementById("version-id");
+            try {
+              const pkg = await fetch("/package.json");
+              const json = await pkg.json();
+              const { version } = json;
+              info.textContent = `Version: ${version}`;
+            } catch (error) {
+              console.error(error);
+              info.textContent = "Version: unknown";
+            }
+          </script>
           <h3>sdraw</h3>
           <section class="colophon">
             <img
@@ Expand All / @@ -94,7 +107,7 @@ <h3>sdraw</h3> @@
             />
             <div class="colophon-info">
               <pre>MIT License</pre>
-              <pre>Version: 0.1.2</pre>
+              <pre id="version-id">Version</pre>
               <pre>2023</pre>
             </div>
           </section>
@@ Expand Down @@

js/boot.mjs

-Original file line number
+Diff line change
@@ Expand Up / @@ -3,6 +3,7 @@ import { @@
       getCursorCanvas,
       setCanvasSizeByViewport,
       setCanvasSizeWithoutPanel,
+      setCanvasFill,
       setVideoSizeByCanvasSize,
     } from "./dom.mjs";
     import {
@@ Expand All / @@ -29,6 +30,7 @@ function attachResizeListeners() { @@
       setCanvasSizeByViewport(cursorCanvas);
       setCanvasSizeWithoutPanel(canvas);
       setVideoSizeByCanvasSize(canvas);
+      setCanvasFill(canvas);
       attachWindowResizeListeners({ canvas, cursorCanvas });
     }
@@ Expand Down @@

js/canvas-utils.mjs

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,7 +1,7 @@
  
    import { COLOR } from "./state/constants.mjs";

    import { getCursorCanvas, getCanvas } from "./dom.mjs";

    import { getPanel } from "./dom.mjs";

    import { isCursorWithinPanelBounds } from "./ui-utils.mjs";

    import { isCursorWithinPanelBounds } from "./ui/utils.mjs";

    const ctx = getCursorCanvas().getContext("2d");

    const canvasCtx = getCanvas().getContext("2d");

    @@ -19,8 +19,8 @@ const LINE_WIDTH = 5;
  
     *

     * @returns {number[]} - Inverted color in r, g,b order.

     */

    function invertColor(r, g, b, a) {

      const rgb = [r, g, b, a];

    function invertColor(r, g, b) {

      const rgb = [r, g, b];

      for (var i = 0; i < rgb.length; i++) rgb[i] = (i === 3 ? 1 : 255) - rgb[i];

      return rgb;

    }

    @@ -42,9 +42,9 @@ function getPixelRGBAColor(x, y) {
  
      }

      const pixel = canvasCtx.getImageData(x, y, GAP, GAP);

      const [r, g, b, a] = invertColor(...pixel.data);

      const [r, g, b] = invertColor(...pixel.data);

      return `rgb(${r}, ${g}, ${b}, ${Math.abs(a)})`;

      return `rgb(${r}, ${g}, ${b})`;

    }

    export function drawCursor(x, y) {

js/dom.mjs

-Original file line number
+Diff line change
@@ -1,3 +1,5 @@
+    import { COLOR } from "./state/constants.mjs";
     export function getCanvas() {
       return document.getElementById("canvas");
     }
@@ Expand Down Expand Up / @@ -53,6 +55,12 @@ export function setVideoSizeByCanvasSize(canvas) { @@
       video.style.height = `${canvas.height}px`;
     }
+    export function setCanvasFill(canvas) {
+      const ctx = canvas.getContext("2d");
+      ctx.fillStyle = COLOR.WHITE;
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
     export function insertCountdown() {
       const countdown = document.createElement("div");
       countdown.id = "countdown";
@@ Expand Down @@

js/state/actions/canvas.mjs

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,11 +1,10 @@
  
    import { getCanvas } from "../../dom.mjs";

    import { getCanvas, setCanvasFill } from "../../dom.mjs";

    import { storeCanvas } from "../storage.mjs";

    export function resetCanvas() {

      const canvas = getCanvas();

      const ctx = canvas.getContext("2d");

      ctx.clearRect(0, 0, canvas.width, canvas.height);

      setCanvasFill(canvas);

      storeCanvas(canvas);

    }

js/ui-utils.mjs

This file was deleted.

js/ui/panel.mjs

-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,7 @@ import { @@
       isPrimaryGamepadButtonPressed,
     } from "../controls/gamepad.mjs";
     import { getPanel } from "../dom.mjs";
-    import { isCursorWithinPanelBounds } from "../ui-utils.mjs";
+    import { isCursorWithinPanelBounds } from "./utils.mjs";
     function getPanelButtonByCoordinates(x, y, panel) {
       const buttons = panel.querySelectorAll("button");
@@ Expand Down @@

js/ui/utils.mjs

-Original file line number
+Diff line change
@@ Expand Up @@
         }
       });
     }
+    /**
+     * Is cursor located on UI panel?
+     *
+     * @param {number} x - Cursor x coordinate.
+     * @param {number} y - Cursor y coordinate.
+     * @param {DOMRect} rect - Panel bounds.
+     *
+     * @returns {boolean} - Is cursor located on UI panel?
+     */
+    export function isCursorWithinPanelBounds(x, y, rect) {
+      return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+    }

package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

package.json

-Original file line number
+Diff line change
@@ -1,6 +1,6 @@
     {
       "name": "sdraw",
-      "version": "0.1.3",
+      "version": "0.1.4",
       "description": "Simple drawing application for kids, can be controlled via mouse, keyboard or gamepad.",
       "private": true,
       "main": "index.mjs",
@@ Expand Down @@

service-worker.js

-Original file line number
+Diff line change
@@ -1,5 +1,5 @@
     const STATIC_CACHE_NAME = "static";
-    const STATIC_CACHE_VERSION = "v41";
+    const STATIC_CACHE_VERSION = "v42";
     const STATIC_CACHE_ID = `${STATIC_CACHE_NAME}-${STATIC_CACHE_VERSION}`;
     // All the files need to be added here manually. I want to avoid
@@ Expand All / @@ -10,6 +10,7 @@ const STATIC_ASSETS = [ @@
       "favicon.ico",
       "manifest.json",
       "README.md",
+      "package.json",
       /* JS */
       "index.mjs",
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix initial canvas #6

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!