Web Template

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_200":201,"_202":203},"routes/_app.x.$handle.$name",{"_100":99,"_32":45,"_108":87,"_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":59,"_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":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",2,"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","script.js","latestPath","fileId","019d4a3d-fcbb-706e-a52b-bd6b6d3e012f","name","fileType","script","content","const canvas = document.getElementById(\"myCanvas\") as HTMLCanvasElement;\ncanvas.width = innerWidth;\ncanvas.height = innerHeight;\nconst ctx = canvas.getContext(\"2d\");\n\ndrawBG();\ndrawCharacter(10, 20,);\ndrawCharacter(800, 300,)\ndrawCharacter(900, 400,)\nfunction drawBG(){\nconst grad = ctx.createLinearGradient(0,0, 0, canvas.height);\ngrad.addColorStop(0, \"#f2480f\");\ngrad.addColorStop(0.1, \"#FA5F55\");\ngrad.addColorStop(0.2, \"#EF5200\");\ngrad.addColorStop(0.3, \" #FE8714\");\ngrad.addColorStop(0.4, \" #FC9C54\");\ngrad.addColorStop(0.5, \"#ce4993\");\ngrad.addColorStop(0.6, \"#4B3D60\");\ngrad.addColorStop(0.7, \"#FAD6A5\");\nctx.fillStyle = grad;\nctx.fillRect(0,0,canvas.width, canvas.height);\n}\n\n\nfunction drawCharacter(x: number, y: number){\n // draw face\n ctx.beginPath();\n ctx.arc(x, y, 30, 0, 2 * Math.PI);\n ctx.fillStyle = \"black\";\n ctx.fill();\n ctx.strokeStyle = \"black\";\n ctx.stroke();\n // draw left eye\n ctx.beginPath();\n ctx.arc(x - 6, y - 3, 6, 0, 2 * Math.PI);\n ctx.fillStyle = \"white\";\n ctx.fill();\n ctx.strokeStyle = \"black\";\n ctx.stroke();\n // draw right eye\n ctx.beginPath();\n ctx.arc(x + 6, y - 3, 6, 0, 2 * Math.PI);\n ctx.fillStyle = \"white\";\n ctx.fill();\n ctx.strokeStyle = \"black\";\n ctx.stroke();\n // draw nose\n ctx.beginPath();\n ctx.arc(x-2, y+5 , 6, 1, 0* Math.PI);\n ctx.fillStyle = \"white\";\n ctx.fill();\n ctx.strokeStyle =\"black\";\n ctx.stroke();\n\n ctx.beginPath();\n ctx.arc(x, y +12, 6, 0, 1 * Math.PI);\n ctx.fillStyle = \"white\";\n ctx.fill();\n ctx.strokeStyle =\"black\";\n ctx.stroke();\n\n // draw left pupuil\n ctx.beginPath();\n ctx.arc(x -5, y -3, 3, 0, 2 * Math.PI);\n ctx.fillStyle = \"red\";\n ctx.fill();\n ctx.strokeStyle = \"black\";\n ctx.stroke();\n // draw right pupil\n ctx.beginPath();\n ctx.arc(x + 3, y - 2, 3, 0, 2 * Math.PI);\n ctx.fillStyle = \"red\";\n ctx.fill();\n ctx.strokeStyle = \"black\";\n ctx.stroke();\n\n\n // draw eyebrows\n ctx.beginPath();\n ctx.moveTo(x - 8, y - 11);\n ctx.lineTo(x - 2, y - 11);\n ctx.strokeStyle = \"white\"\n ctx.stroke();\n ctx.beginPath();\n ctx.moveTo(x + 8, y - 11);\n ctx.lineTo(x + 2, y - 11);\n ctx.strokeStyle = \"white\"\n ctx.stroke();\n}","const canvas = document.getElementById('freddy')as HTMLCanvasElement;\ncanvas.width = innerWidth;\ncanvas.height = innerHeight;\nconst ctx = canvas.getContext(\"2d\");\n\n function draw() {\n const brown = \"#714222\";\n const dark = \"#4a2a16\";\n const tan = \"#c4a484\";\n\n // --- LEGS ---\n ctx.fillStyle = dark;\n ctx.fillRect(220, 520, 50, 150); // Left Leg\n ctx.fillRect(330, 520, 50, 150); // Right Leg\n ctx.fillStyle = brown;\n ctx.beginPath(); ctx.ellipse(220, 680, 45, 20, 0, 0, Math.PI*2); ctx.fill(); // L Foot\n ctx.beginPath(); ctx.ellipse(380, 680, 45, 20, 0, 0, Math.PI*2); ctx.fill(); // R Foot\n\n // --- ARMS ---\n ctx.fillStyle = dark;\n ctx.fillRect(150, 320, 45, 120); // L Arm\n ctx.fillRect(405, 320, 45, 120); // R Arm\n\n // --- TORSO ---\n ctx.fillStyle = brown;\n ctx.beginPath(); ctx.ellipse(300, 400, 110, 150, 0, 0, Math.PI*2); ctx.fill();\n ctx.fillStyle = tan; \n ctx.beginPath(); ctx.ellipse(300, 420, 70, 100, 0, 0, Math.PI*2); ctx.fill(); // Belly\n\n // --- HEAD ---\n ctx.fillStyle = brown;\n ctx.beginPath(); ctx.arc(300, 180, 85, 0, Math.PI*2); ctx.fill(); // Head\n ctx.beginPath(); ctx.arc(220, 130, 30, 0, Math.PI*2); ctx.fill(); // L Ear\n ctx.beginPath(); ctx.arc(380, 130, 30, 0, Math.PI*2); ctx.fill(); // R Ear\n\n // Face Details\n ctx.fillStyle = tan;\n ctx.beginPath(); ctx.ellipse(300, 220, 65, 45, 0, 0, Math.PI*2); ctx.fill(); // Muzzle\n ctx.fillStyle = \"black\";\n ctx.beginPath(); ctx.arc(300, 200, 15, 0, Math.PI*2); ctx.fill(); // Nose\n \n // Eyes\n ctx.fillStyle = \"white\";\n ctx.beginPath(); ctx.arc(265, 160, 18, 0, Math.PI*2); ctx.fill();\n ctx.beginPath(); ctx.arc(335, 160, 18, 0, Math.PI*2); ctx.fill();\n ctx.fillStyle = \"#3498db\";\n ctx.beginPath(); ctx.arc(265, 160, 8, 0, Math.PI*2); ctx.fill();\n ctx.beginPath(); ctx.arc(335, 160, 8, 0, Math.PI*2); ctx.fill();\n\n // Accessories\n ctx.fillStyle = \"black\";\n ctx.fillRect(260, 60, 80, 90); // Hat\n ctx.fillRect(240, 145, 120, 15); // Brim\n ctx.fillRect(250, 280, 100, 30); // Bowtie\n }\n\n draw();","createdAt",["D",1775067232584],"branchVersion","branchId","28dfc872-2df6-11f1-99f7-42dde27851f2","id","28dadd62-2df6-11f1-99f7-42dde27851f2","html-canvas-freddy",["D",1775067069565],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Template for a basic HTML + CSS + JavaScript static website","imageUrl","019b8ed8-ddf9-70cb-ad0a-074c87731d15","pinnedFileId","019d4a3d-fcbb-706e-a52b-b98745d07c00","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019b8ed8-ddf9-70cb-ad0a-095617756859","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":55,"_104":105,"_106":25},"branch",{"_13":86,"_32":87,"_43":42,"_88":44,"_89":90,"_91":92,"_93":50,"_94":95,"_96":65,"_97":45,"_98":99},"isOwned",4,"main","projectId","forkedBranchId","5b45b086-2c45-11f1-9eed-42dde27851f2","forkedBranchVersion",57,"forkedProjectPrivacy","forkedProjectId","5b3ad4c2-2c45-11f1-9eed-42dde27851f2","forkedProjectOrgId","projectName","userHandle","zakattack3289","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zN3FRTmdsd21LZkJwMzhQT2V4dWNyVlE0a28ifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":196,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":197,"_81":198,"_83":199,"_85":25},"tree",[179,180,181,182],"files",[179,180,181,182],"counts",{"_169":63,"_170":136,"_171":63,"_172":173,"_174":175},"contents",[141,142,143,144],"upstreamProject",{"_43":95,"_32":139,"_52":53,"_54":-5,"_49":50,"_79":140},"upstreamBranch",{"_43":90,"_38":132,"_133":134,"_32":87,"_88":95,"_13":92,"_89":135,"_91":136,"_137":138,"_47":-5,"_85":25,"_49":50,"_98":99,"_64":65,"_97":139},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1774881181996],"updatedAt",["D",1775059408013],"4f3da514-2c45-11f1-a013-42dde27851f2",1,"lockfileKey","1775067052769-esm.town_v_zakattack3289_html-canvas-demo1@57-main","html-canvas-demo1",{"_100":99,"_107":103},{"_43":163,"_32":164,"_30":165,"_148":-5,"_41":42,"_40":136,"_149":25,"_38":166,"_13":63,"_33":20,"_35":167,"_24":25,"_152":-5,"_27":168},{"_43":157,"_32":158,"_30":57,"_148":-5,"_41":42,"_40":136,"_149":59,"_38":159,"_13":63,"_33":160,"_35":161,"_24":25,"_152":-5,"_27":162},{"_43":154,"_32":28,"_30":31,"_148":-5,"_41":42,"_40":14,"_149":59,"_38":155,"_13":136,"_33":34,"_35":37,"_24":25,"_152":-5,"_27":156},{"_43":145,"_32":146,"_30":147,"_148":-5,"_41":42,"_40":136,"_149":25,"_38":150,"_13":63,"_33":20,"_35":151,"_24":25,"_152":-5,"_27":153},"28e465c6-2df6-11f1-99f7-42dde27851f2","style.css","019d4a3d-fcbb-706e-a52b-c3f0c337546b","parentId","latest",["D",1775067069565],"* {\n box-sizing: border-box;\n}","label",[146],"8a059672-2df6-11f1-8b73-42dde27851f2",["D",1775067232584],[28],"28e45158-2df6-11f1-99f7-42dde27851f2","main.ts",["D",1775067069565],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nexport default staticHTTPServer(import.meta.url);",[158],"28e44280-2df6-11f1-99f7-42dde27851f2","index.html","019d4a3d-fcba-721e-9807-7f8e9ff52b7d",["D",1775067069565],"\n\n \n Web Template\n \n \n \n \n \n \n \n \n",[164],"pulls","branches","forks","envVars",{"_176":63,"_178":63},"connections",{"_176":63,"_177":63},"count","unfilledCount","emptyCount",{"_43":163,"_32":164,"_30":165,"_148":-5,"_41":42,"_40":136,"_149":25,"_38":193,"_13":63,"_33":20,"_35":167,"_24":25,"_152":-5,"_184":194,"_27":195},{"_43":157,"_32":158,"_30":57,"_148":-5,"_41":42,"_40":136,"_149":59,"_38":190,"_13":63,"_33":160,"_35":161,"_24":25,"_152":-5,"_184":191,"_27":192},{"_43":154,"_32":28,"_30":31,"_148":-5,"_41":42,"_40":14,"_149":59,"_38":187,"_13":136,"_33":34,"_35":37,"_24":25,"_152":-5,"_184":188,"_27":189},{"_43":145,"_32":146,"_30":147,"_148":-5,"_41":42,"_40":136,"_149":25,"_38":183,"_13":63,"_33":20,"_35":151,"_24":25,"_152":-5,"_184":185,"_27":186},["D",1775067069565],"children",[],[146],["D",1775067232584],[],[28],["D",1775067069565],[],[158],["D",1775067069565],[],[164],["D",1775067069565],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":55,"_104":105,"_106":25},{"_13":86,"_32":87,"_43":42,"_88":44,"_89":90,"_91":92,"_93":50,"_94":95,"_96":65,"_97":45,"_98":99},"ctx",{"_79":-5,"_129":233,"_234":235,"_236":237,"_238":25,"_239":25,"_240":25,"_241":59,"_242":-5,"_243":-7,"_244":-7,"_245":63,"_246":25,"_247":25,"_248":-5,"_249":25,"_250":25,"_251":25,"_252":-5},"ENV",{"_204":205,"_206":207,"_208":87,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232},"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 · v2