Canvas testing

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_197":198,"_199":200},"routes/_app.x.$handle.$name",{"_100":99,"_32":45,"_108":86,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":121,"_122":123,"_124":25,"_125":126,"_127":58,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",16,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.js","latestPath","fileId","d1163278-53af-11f0-96bb-f69ea79377d9","name","fileType","script","content","const TILE_WIDTH = 1000;\nconst TILE_HEIGHT = 1000;\n\nconst UI_STATE = {\n brushColor: \"#000000\",\n zoom: 0.4,\n};\n\nconst NUMBER_VALUE_KEYS = [\"brushSize\"];\n\ndocument.querySelectorAll(\"#tools input\").forEach((input) => {\n const updateUIState = (el) => {\n console.log(el);\n const stateKey = el.name;\n const value = el.value;\n if (NUMBER_VALUE_KEYS.includes(stateKey)) {\n UI_STATE[stateKey] = parseInt(value, 10);\n } else {\n UI_STATE[stateKey] = value;\n }\n };\n\n if (input.checked) updateUIState(input);\n input.addEventListener(\"change\", (e) => updateUIState(e.target));\n});\n\nlet IS_DRAWING = false;\n\nconst mainCanvas = document.getElementById(\"mainCanvas\");\nconst layerCanvas = document.getElementById(\"layerCanvas\");\n\nconst mainCtx = mainCanvas.getContext(\"2d\");\nconst layerCtx = layerCanvas.getContext(\"2d\");\n\nfunction setMainCanvasSize() {\n const dpr = window.devicePixelRatio || 1;\n mainCanvas.width = window.innerWidth * dpr;\n mainCanvas.height = window.innerHeight * dpr;\n mainCanvas.style.width = window.innerWidth + \"px\";\n mainCanvas.style.height = window.innerHeight + \"px\";\n mainCtx.scale(dpr, dpr);\n}\n\nsetMainCanvasSize();\nwindow.addEventListener(\"resize\", setMainCanvasSize);\n\nlayerCanvas.width = TILE_WIDTH;\nlayerCanvas.height = TILE_HEIGHT;\n\n// Define the special tile that accepts draw events\nconst specialTileX = 1;\nconst specialTileY = 1;\n\nfunction getLayerCoords(e) {\n const rect = mainCanvas.getBoundingClientRect();\n const scaleX = TILE_WIDTH / rect.width;\n const scaleY = TILE_HEIGHT / rect.height;\n\n let clientX, clientY;\n if (e instanceof MouseEvent) {\n clientX = e.clientX;\n clientY = e.clientY;\n } else {\n // Use the first touch point for drawing\n clientX = e.touches[0].clientX;\n clientY = e.touches[0].clientY;\n }\n\n // Calculate which tile the mouse is over\n const tileWidth = TILE_WIDTH * UI_STATE.zoom;\n const tileHeight = TILE_HEIGHT * UI_STATE.zoom;\n\n const tileIndexX = Math.floor((clientX - rect.left) / tileWidth);\n const tileIndexY = Math.floor((clientY - rect.top) / tileHeight);\n\n // Coordinates relative to the layer\n const layerX = clientX / UI_STATE.zoom - TILE_WIDTH * tileIndexX;\n const layerY = clientY / UI_STATE.zoom - TILE_HEIGHT * tileIndexY;\n\n // Check if the coordinates are within the special tile\n const isWithinSpecialTile = tileIndexX === specialTileX\n && tileIndexY === specialTileY\n && layerX >= 0\n && layerX < TILE_WIDTH\n && layerY >= 0\n && layerY < TILE_HEIGHT;\n\n return {\n x: layerX,\n y: layerY,\n isWithinSpecialTile,\n };\n}\n\nfunction updateDisplay() {\n mainCtx.clearRect(0, 0, mainCtx.canvas.width, mainCtx.canvas.height);\n\n const tilesX = Math.ceil(mainCtx.canvas.width / (TILE_WIDTH * UI_STATE.zoom)) + 1;\n const tilesY = Math.ceil(mainCtx.canvas.height / (TILE_HEIGHT * UI_STATE.zoom)) + 1;\n\n for (let x = 0; x < tilesX; x++) {\n for (let y = 0; y < tilesY; y++) {\n const tileX = x * TILE_WIDTH * UI_STATE.zoom;\n const tileY = y * TILE_HEIGHT * UI_STATE.zoom;\n\n mainCtx.drawImage(\n layerCanvas,\n tileX,\n tileY,\n TILE_WIDTH * UI_STATE.zoom,\n TILE_HEIGHT * UI_STATE.zoom,\n );\n\n // Draw a red square only around the special tile\n if (x === specialTileX && y === specialTileY) {\n mainCtx.strokeStyle = \"violet\";\n mainCtx.lineWidth = 2;\n mainCtx.strokeRect(tileX, tileY, TILE_WIDTH * UI_STATE.zoom, TILE_HEIGHT * UI_STATE.zoom);\n }\n }\n }\n requestAnimationFrame(updateDisplay);\n}\n\nfunction startDrawing(e) {\n e.preventDefault(); // Prevent default touch behavior\n IS_DRAWING = true;\n const { x, y, isWithinSpecialTile } = getLayerCoords(e);\n if (isWithinSpecialTile) {\n // Draw a circle as soon as the brush stroke starts, so a click or tap will result in a circle\n layerCtx.beginPath();\n layerCtx.arc(x, y, UI_STATE.brushSize / 2, 0, Math.PI * 2);\n layerCtx.fill();\n\n // Begin a line as well.\n layerCtx.beginPath();\n layerCtx.moveTo(x, y);\n }\n}\n\nfunction stopDrawing(e) {\n e.preventDefault(); // Prevent default touch behavior\n IS_DRAWING = false;\n layerCtx.closePath();\n}\n\nfunction draw(e) {\n e.preventDefault(); // Prevent default touch behavior\n\n if (!IS_DRAWING) return;\n\n const { x, y, isWithinSpecialTile } = getLayerCoords(e);\n\n // Only draw if within the special tile area\n if (isWithinSpecialTile) {\n layerCtx.lineTo(x, y);\n layerCtx.strokeStyle = UI_STATE.brushColor;\n layerCtx.lineWidth = UI_STATE.brushSize;\n layerCtx.lineCap = \"round\";\n layerCtx.lineJoin = \"round\";\n layerCtx.stroke();\n }\n}\n\n// Add both mouse and touch event listeners\nmainCanvas.addEventListener(\"mousedown\", startDrawing);\nmainCanvas.addEventListener(\"mousemove\", draw);\nmainCanvas.addEventListener(\"mouseup\", stopDrawing);\nmainCanvas.addEventListener(\"mouseout\", stopDrawing);\n\nmainCanvas.addEventListener(\"touchstart\", startDrawing, { passive: false });\nmainCanvas.addEventListener(\"touchmove\", draw, { passive: false });\nmainCanvas.addEventListener(\"touchend\", stopDrawing, { passive: false });\nmainCanvas.addEventListener(\"touchcancel\", stopDrawing, { passive: false });\n\n// mainCanvas.addEventListener('pointerdown', startDrawing, { passive: false })\n// mainCanvas.addEventListener('pointermove', draw, { passive: false })\n// mainCanvas.addEventListener('pointerup', stopDrawing, { passive: false })\n// mainCanvas.addEventListener('pointercancel', stopDrawing, { passive: false })\n\nupdateDisplay();","const TILE_WIDTH = 1000;\nconst TILE_HEIGHT = 1000;\n\nconst UI_STATE = {\n brushColor: \"#000000\",\n zoom: 0.4,\n};\n\nconst NUMBER_VALUE_KEYS = [\"brushSize\"];\n\ndocument.querySelectorAll(\"#tools input\").forEach((input) => {\n const updateUIState = (el) => {\n console.log(el);\n const stateKey = el.name;\n const value = el.value;\n if (NUMBER_VALUE_KEYS.includes(stateKey)) {\n UI_STATE[stateKey] = parseInt(value, 10);\n } else {\n UI_STATE[stateKey] = value;\n }\n };\n\n if (input.checked) updateUIState(input);\n input.addEventListener(\"change\", (e) => updateUIState(e.target));\n});\n\nlet IS_DRAWING = false;\n\nconst mainCanvas = document.getElementById(\"mainCanvas\");\nconst layerCanvas = document.getElementById(\"layerCanvas\");\n\nconst mainCtx = mainCanvas.getContext(\"2d\");\nconst layerCtx = layerCanvas.getContext(\"2d\");\n\nfunction setMainCanvasSize() {\n const dpr = window.devicePixelRatio || 1;\n mainCanvas.width = window.innerWidth * dpr;\n mainCanvas.height = window.innerHeight * dpr;\n mainCanvas.style.width = window.innerWidth + \"px\";\n mainCanvas.style.height = window.innerHeight + \"px\";\n mainCtx.scale(dpr, dpr);\n}\n\nsetMainCanvasSize();\nwindow.addEventListener(\"resize\", setMainCanvasSize);\n\nlayerCanvas.width = TILE_WIDTH;\nlayerCanvas.height = TILE_HEIGHT;\n\n// Define the special tile that accepts draw events\nconst specialTileX = 1;\nconst specialTileY = 1;\n\nfunction getLayerCoords(e) {\n const rect = mainCanvas.getBoundingClientRect();\n const scaleX = TILE_WIDTH / rect.width;\n const scaleY = TILE_HEIGHT / rect.height;\n\n let clientX, clientY;\n if (e instanceof MouseEvent) {\n clientX = e.clientX;\n clientY = e.clientY;\n } else {\n // Use the first touch point for drawing\n clientX = e.touches[0].clientX;\n clientY = e.touches[0].clientY;\n }\n\n // Calculate which tile the mouse is over\n const tileWidth = TILE_WIDTH * UI_STATE.zoom;\n const tileHeight = TILE_HEIGHT * UI_STATE.zoom;\n\n const tileIndexX = Math.floor((clientX - rect.left) / tileWidth);\n const tileIndexY = Math.floor((clientY - rect.top) / tileHeight);\n\n // Coordinates relative to the layer\n const layerX = clientX / UI_STATE.zoom - TILE_WIDTH * tileIndexX;\n const layerY = clientY / UI_STATE.zoom - TILE_HEIGHT * tileIndexY;\n\n // Check if the coordinates are within the special tile\n const isWithinSpecialTile = tileIndexX === specialTileX\n && tileIndexY === specialTileY\n && layerX >= 0\n && layerX < TILE_WIDTH\n && layerY >= 0\n && layerY < TILE_HEIGHT;\n\n return {\n x: layerX,\n y: layerY,\n isWithinSpecialTile,\n };\n}\n\nfunction updateDisplay() {\n mainCtx.clearRect(0, 0, mainCtx.canvas.width, mainCtx.canvas.height);\n\n const tilesX = Math.ceil(mainCtx.canvas.width / (TILE_WIDTH * UI_STATE.zoom)) + 1;\n const tilesY = Math.ceil(mainCtx.canvas.height / (TILE_HEIGHT * UI_STATE.zoom)) + 1;\n\n for (let x = 0; x < tilesX; x++) {\n for (let y = 0; y < tilesY; y++) {\n const tileX = x * TILE_WIDTH * UI_STATE.zoom;\n const tileY = y * TILE_HEIGHT * UI_STATE.zoom;\n\n mainCtx.drawImage(\n layerCanvas,\n tileX,\n tileY,\n TILE_WIDTH * UI_STATE.zoom,\n TILE_HEIGHT * UI_STATE.zoom,\n );\n\n // Draw a red square only around the special tile\n if (x === specialTileX && y === specialTileY) {\n mainCtx.strokeStyle = \"violet\";\n mainCtx.lineWidth = 2;\n mainCtx.strokeRect(tileX, tileY, TILE_WIDTH * UI_STATE.zoom, TILE_HEIGHT * UI_STATE.zoom);\n }\n }\n }\n requestAnimationFrame(updateDisplay);\n}\n\nfunction startDrawing(e) {\n e.preventDefault(); // Prevent default touch behavior\n IS_DRAWING = true;\n const { x, y, isWithinSpecialTile } = getLayerCoords(e);\n if (isWithinSpecialTile) {\n // Draw a circle as soon as the brush stroke starts, so a click or tap will result in a circle\n layerCtx.beginPath();\n layerCtx.arc(x, y, UI_STATE.brushSize / 2, 0, Math.PI * 2);\n layerCtx.fillStyle = UI_STATE.brushColor;\n layerCtx.fill();\n\n // Begin a line as well.\n layerCtx.beginPath();\n layerCtx.moveTo(x, y);\n }\n}\n\nfunction stopDrawing(e) {\n e.preventDefault(); // Prevent default touch behavior\n IS_DRAWING = false;\n layerCtx.closePath();\n}\n\nfunction draw(e) {\n e.preventDefault(); // Prevent default touch behavior\n\n if (!IS_DRAWING) return;\n\n const { x, y, isWithinSpecialTile } = getLayerCoords(e);\n\n // Only draw if within the special tile area\n if (isWithinSpecialTile) {\n layerCtx.lineTo(x, y);\n layerCtx.strokeStyle = UI_STATE.brushColor;\n layerCtx.lineWidth = UI_STATE.brushSize;\n layerCtx.lineCap = \"round\";\n layerCtx.lineJoin = \"round\";\n layerCtx.stroke();\n }\n}\n\n// Add both mouse and touch event listeners\nmainCanvas.addEventListener(\"mousedown\", startDrawing);\nmainCanvas.addEventListener(\"mousemove\", draw);\nmainCanvas.addEventListener(\"mouseup\", stopDrawing);\nmainCanvas.addEventListener(\"mouseout\", stopDrawing);\n\nmainCanvas.addEventListener(\"touchstart\", startDrawing, { passive: false });\nmainCanvas.addEventListener(\"touchmove\", draw, { passive: false });\nmainCanvas.addEventListener(\"touchend\", stopDrawing, { passive: false });\nmainCanvas.addEventListener(\"touchcancel\", stopDrawing, { passive: false });\n\n// mainCanvas.addEventListener('pointerdown', startDrawing, { passive: false })\n// mainCanvas.addEventListener('pointermove', draw, { passive: false })\n// mainCanvas.addEventListener('pointerup', stopDrawing, { passive: false })\n// mainCanvas.addEventListener('pointercancel', stopDrawing, { passive: false })\n\nupdateDisplay();","createdAt",["D",1751243444057],"branchVersion","branchId","a5dc1050-53af-11f0-94c6-f69ea79377d9","id","a5d8d444-53af-11f0-94c6-f69ea79377d9","draw",["D",1751067431505],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","cea41dc4-b4c3-4a38-8ee6-ee9b5960fda2","pinnedFileId","351db508-4b7a-40df-9dc1-818be7094620","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","dbeafde9-66b9-4cff-8625-2da1195a1c5d","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":54,"_104":105,"_106":25},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":89,"_90":91,"_92":50,"_93":94,"_95":96,"_97":45,"_98":99},"isOwned",24,"main","projectId","forkedBranchId","7a3b261a-4186-11f0-ae9b-76b3cceeab13","forkedBranchVersion",67,"forkedProjectPrivacy","forkedProjectId","7a3abcf2-4186-11f0-ae9b-76b3cceeab13","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","halffullheart","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaGQyZVFDeXM0U3YzNkpjdHpudnBqcHRtOGQifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":193,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":194,"_80":195,"_82":196,"_84":25},"tree",[180,181,182],"files",[180,181,182],"counts",{"_170":62,"_171":151,"_172":62,"_173":174,"_175":176},"contents",[145,146,147],"upstreamProject",{"_43":94,"_32":140,"_52":141,"_53":142,"_49":50,"_78":143},"upstreamBranch",{"_43":89,"_38":133,"_134":135,"_32":86,"_87":94,"_13":136,"_88":-5,"_90":-5,"_137":138,"_47":-5,"_84":25,"_49":50,"_98":139,"_63":96,"_97":140},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{"_56":132},"draw.halffullheart.com",["D",1749070628054],"updatedAt",["D",1779896149804],76,"lockfileKey","1779896350378-esm.town_v_templates_basic-html-starter@76-main","templates","basic-html-starter","Basic HTML starter template based on Glitch's starter","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/1e130d76-f5f9-42d2-df67-91517700ff00/square512?exp=1789559999&sig=07961db937eba6931a28890443b5f72ef5e12debba4e542c540c9f0cbb4eac80",{"_100":139,"_107":144},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789559999&sig=5c07b77d973a9a7831cc1779f4bd4ec152796753863d0aeae4088e1e0ae03921",{"_43":162,"_32":163,"_30":164,"_150":-5,"_41":42,"_40":165,"_152":25,"_38":166,"_13":167,"_33":20,"_35":168,"_24":25,"_156":-5,"_27":169},{"_43":158,"_32":28,"_30":31,"_150":-5,"_41":42,"_40":14,"_152":25,"_38":159,"_13":160,"_33":34,"_35":37,"_24":25,"_156":-5,"_27":161},{"_43":148,"_32":149,"_30":56,"_150":-5,"_41":42,"_40":151,"_152":58,"_38":153,"_13":62,"_33":154,"_35":155,"_24":25,"_156":-5,"_27":157},"a5e10a42-53af-11f0-94c6-f69ea79377d9","main.tsx","parentId",1,"latest",["D",1751067431505],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer(import.meta.url);","label",[149],"757df1bc-5549-11f0-a496-f69ea79377d9",["D",1751243444057],3,[28],"6e476a9a-5549-11f0-9324-f69ea79377d9","index.html","be664972-ec19-48de-b950-a839c58ad89a",15,["D",1751243431951],7,"\n\n \n Canvas testing\n \n \n \n \n

\n \n \n \n \n",[163],"pulls","branches","forks","envVars",{"_177":62,"_179":62},"connections",{"_177":62,"_178":62},"count","unfilledCount","emptyCount",{"_43":162,"_32":163,"_30":164,"_150":-5,"_41":42,"_40":165,"_152":25,"_38":190,"_13":167,"_33":20,"_35":168,"_24":25,"_156":-5,"_184":191,"_27":192},{"_43":158,"_32":28,"_30":31,"_150":-5,"_41":42,"_40":14,"_152":25,"_38":187,"_13":160,"_33":34,"_35":37,"_24":25,"_156":-5,"_184":188,"_27":189},{"_43":148,"_32":149,"_30":56,"_150":-5,"_41":42,"_40":151,"_152":58,"_38":183,"_13":62,"_33":154,"_35":155,"_24":25,"_156":-5,"_184":185,"_27":186},["D",1751067431505],"children",[],[149],["D",1751243444057],[],[28],["D",1751243431951],[],[163],["D",1751067431505],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":54,"_104":105,"_106":25},{"_13":85,"_32":86,"_43":42,"_87":44,"_88":89,"_90":91,"_92":50,"_93":94,"_95":96,"_97":45,"_98":99},"ctx",{"_78":-5,"_129":230,"_231":232,"_233":234,"_235":25,"_236":25,"_237":25,"_238":58,"_239":-5,"_240":-7,"_241":-7,"_242":62,"_243":25,"_244":25,"_245":-5,"_246":25,"_247":25,"_248":25,"_249":-5},"ENV",{"_201":202,"_203":204,"_205":86,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v16