add a screenshot button

Author: luizbills

public/app.js

@@ -171,6 +171,33 @@ <h1>Litecanvas</h1>
           />
         </svg>
       </a>
+      <button
+        type="button"
+        id="screenshot"
+        title="Take a screenshot"
+        aria-label="Take a screenshot"
+        style="margin-left: auto; order: 3"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          width="24"
+          height="24"
+          stroke-width="1.5"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z"
+          />
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z"
+          />
+        </svg>
+      </button>
     </div>
     <div class="editor">
       <div class="code">

public/index.html

@@ -1,5 +1,5 @@
 const cacheName = "luizbills.litecanvas-editor-v1";
-const version = "2025.7.18.1";
+const version = "2025.7.18.2";
 
 const precacheResources = [
   "/",

public/sw.js

@@ -63,6 +63,7 @@ const desktopExtensions = [];
 const code = $(".code");
 const game = $(".game");
 const playButton = $("#play");
+const screenshotButton = $("#screenshot");
 const stopButton = $("#stop");
 const shareButton = $("#share");
 const copyButton = $("#copy");
@@ -76,6 +77,7 @@ playButton.addEventListener("click", () => {
   show(game);
   hide(playButton);
   show(stopButton);
+  show(screenshotButton);
   runCode();
   if (smallScreen) {
     getIframe().focus();
@@ -90,6 +92,7 @@ function stopGame(evt) {
   hide(game);
   show(playButton);
   hide(stopButton);
+  hide(screenshotButton);
   getIframe().remove();
 }
 
@@ -147,6 +150,21 @@ hideEditor.addEventListener("click", (evt) => {
   getIframe().focus();
 });
 
+screenshotButton.addEventListener("click", () => {
+  var link = document.createElement("a");
+  link.download = "litecanvas-colors.png";
+  const iframe = getIframe();
+
+  if (!iframe) return;
+
+  const iframeDocument = iframe.contentDocument;
+  if (iframeDocument) {
+    const canvas = iframeDocument.querySelector("canvas");
+    link.href = canvas.toDataURL();
+    link.click();
+  }
+});
+
 function runCode() {
   const iframe = getIframe();
   iframe.src = "preview.html"; // reload the iframe
@@ -329,6 +347,7 @@ if (!smallScreen) {
 } else {
   show(playButton);
   hide(game);
+  hide(screenshotButton);
 }
 
 window.isUpdateAvailable = new Promise(function (resolve) {