Merge pull request #6 from comatory/comatory/fix-initial-canvas

fix initial canvas

Author: comatory

index.html

@@ -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
@@ -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>

js/boot.mjs

@@ -3,6 +3,7 @@ import {
   getCursorCanvas,
   setCanvasSizeByViewport,
   setCanvasSizeWithoutPanel,
+  setCanvasFill,
   setVideoSizeByCanvasSize,
 } from "./dom.mjs";
 import {
@@ -29,6 +30,7 @@ function attachResizeListeners() {
   setCanvasSizeByViewport(cursorCanvas);
   setCanvasSizeWithoutPanel(canvas);
   setVideoSizeByCanvasSize(canvas);
+  setCanvasFill(canvas);
 
   attachWindowResizeListeners({ canvas, cursorCanvas });
 }

js/canvas-utils.mjs

@@ -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

@@ -1,3 +1,5 @@
+import { COLOR } from "./state/constants.mjs";
+
 export function getCanvas() {
   return document.getElementById("canvas");
 }
@@ -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";

js/state/actions/canvas.mjs

@@ -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

@@ -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");

js/ui/panel.mjs

@@ -38,3 +38,16 @@ export function updateActivatedButton(buttonContainer, value) {
     }
   });
 }
+
+/**
+ * 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;
+}

js/ui/utils.mjs

@@ -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",