Add canvas renderer

docs/render/canvas.css

@@ -0,0 +1,67 @@
+* {
+  font-family:  -apple-system, BlinkMacSystemFont, sans-serif;
+  --color:black;
+  --background-color:white;
+}
+
+@media(prefers-color-scheme:dark){body{--color:white;--background-color:#111;}}
+
+body {
+  display:flex;
+  min-height:100vh;
+  justify-content: center;
+  align-items: center;
+  font-size:10vmin;
+  margin:0;
+  color:var(--color);
+  background-color:var(--background-color);
+}
+
+canvas:not(.fullbleed) {
+  border:1px solid black;
+  max-height: 90vh;
+  max-width: 90vw;
+}
+
+canvas.fullbleed {
+  max-height: 100vh;
+  max-width: 100vw;
+}
+
+
+.toolbar {
+  position:
+  absolute;
+  top: 16px;
+  right: 16px;
+  padding: 0;
+  font-size: 16px;
+  opacity: 0.2;
+}
+
+.toolbar:hover {
+  opacity:1.0;
+}
+
+.toolbar select,
+.toolbar a {
+  height: 2em;
+  border-radius: 3em;
+  line-height:2em;
+  font-weight: bold;
+  padding: 0.25em 0.5em;
+  border:1px solid black;
+  border-radius: 99em;
+  background-color: rgba(0,0,0,0.5);
+  color: white;
+  margin-left: 0.5em;
+  backdrop-filter: blur(3px);
+  }
+
+#save {
+  cursor:
+  pointer;
+  padding: 0.25em 0.5em;
+  text-decoration: none;
+  text-transform: uppercase;
+}

docs/render/canvas.js

@@ -0,0 +1,83 @@
+let script = document.currentScript?.src || import.meta?.url;
+
+function render() {
+  let colors = params.body;
+  window.canvas = el("canvas.fullbleed", {width:screen.width, height:screen.height});
+  window.ctx = canvas.getContext("2d");
+  window.w = window.canvas.width
+  window.h = window.canvas.height
+  document.body.appendChild(
+    el("form.toolbar", {onchange: updateDimensions},
+      el("select#size", 
+        el("option", {value:"*"}, "this screen"),
+        el("option", {value:"page", selected:"selected"}, "this page"),
+        el("option", {value:"1500x500"}, "a cover image"),
+        el("option", {value:"1920x1080"}, "a virtual background"),
+        el("option", {value:"1600x1600"}, "a square"),
+      ),
+      el("a#save", {href:"#", onclick:saveImage}, "Save")
+    )
+  );
+  document.body.appendChild(window.canvas);
+  updateDimensions();
+}
+
+function updateDimensions(e) {
+  var ua = navigator.userAgent;
+  var isMac = /Macintosh/.test(ua)
+  var isWin = /Windows/.test(ua)
+  var iOS = /iPad|iPhone|iPod/.test(ua)
+
+  var density = window.devicePixelRatio;
+  var sh = screen.height, sw = screen.width;
+  if (iOS && Math.abs(window.orientation) == 90) {
+    [sw, sh] = [sh, sw]
+  }
+  
+  sw *= density; sh *= density;
+
+  let sizeString = document.querySelector('#size').value || "*";
+  // localStorage.setItem("size", sizeString)
+
+  if (sizeString == "page") { //} || fullbleed) {
+    sw = window.innerWidth;
+    sh = window.innerHeight;
+    sw *= density;
+    sh *= density;
+  } else if (sizeString != "*") {
+    let sizes = sizeString.split("x");
+    sw = sizes[0]
+    sh = sizes[1] || sw
+    density = 2;
+  }
+  canvas.width = window.w = sw;
+  canvas.height = window.h = sh;
+  redraw();
+}
+
+function redraw() {
+  eval(params.body);
+  console.log("params", params)
+}
+
+
+
+function saveImage(e) {
+  let target = e.target;
+  target.href = window.canvas.toDataURL("image/png");
+  target.download = "title.png";
+
+  // window.canvas.toBlob(function(blob) {
+  //   window.URL.revokeObjectURL(blobURL);
+  //   blobURL = window.URL.createObjectURL(blob);
+  //   target.href = blobURL;
+  // });
+}
+
+var path = script.substring(0, script.lastIndexOf("."));
+var cssURL = path + ".css";
+Promise.all([ 
+  loadSyle(cssURL)
+]).then(render);
+
+