Web Template

\n\n \n","deleted","label","children",[],[166],{"_106":186,"_99":187,"_167":119,"_169":-5,"_170":149,"_171":188,"_173":121,"_108":189,"_103":190,"_176":191,"_178":192,"_180":22,"_181":-5,"_182":193,"_102":194},"b414b7de-2df3-11f1-a10f-42dde27851f2","main.ts",8,["D",1775066014661],1,"http","import { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useRef } from \"https://esm.sh/react@18.2.0\";",[],[187],{"_106":196,"_99":197,"_167":198,"_169":-5,"_170":149,"_171":148,"_173":121,"_108":199,"_103":200,"_176":201,"_178":202,"_180":22,"_181":-5,"_182":203,"_102":204},"baa87cc0-2df3-11f1-8b1e-42dde27851f2","script.js","019d498d-16be-774b-a803-4fa6f0f6c50d",["D",1775066025692],5,"script","function App() {\n const canvasRef = useRef(null);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const ctx = canvas.getContext('2d');\n\n // Setup Canvas\n canvas.width = 400;\n canvas.height = 600;\n \n // Colors\n const brown = '#6F4E37';\n const darkBrown = '#4B3621';\n const lightBrown = '#A67B5B';\n const white = '#FFFFFF';\n const black = '#000000';\n const blue = '#0000FF';\n\n // Helper to draw a circle\n const drawCircle = (x, y, radius, color, start = 0, end = 2 * Math.PI) => {\n ctx.beginPath();\n ctx.arc(x, y, radius, start, end);\n ctx.fillStyle = color;\n ctx.fill();\n ctx.closePath();\n };\n\n // --- DRAW FREDDY ---\n \n // Body\n drawCircle(200, 350, 60, brown); // Torso\n drawCircle(200, 320, 40, brown); // Upper Chest\n \n // Head\n drawCircle(200, 180, 50, brown); // Main Head\n \n // Ears\n drawCircle(160, 140, 15, brown); // Left Ear\n drawCircle(240, 140, 15, brown); // Right Ear\n drawCircle(160, 140, 8, darkBrown); // Inner Left\n drawCircle(240, 140, 8, darkBrown); // Inner Right\n\n // Hat\n ctx.fillStyle = black;\n ctx.fillRect(170, 100, 60, 20); // Brim\n ctx.fillRect(185, 70, 30, 35); // Top\n\n // Face Details\n drawCircle(180, 170, 5, white); // Eyes\n drawCircle(220, 170, 5, white);\n drawCircle(180, 170, 2, black); // Pupils\n drawCircle(220, 170, 2, black);\n \n // Muzzle/Snout\n ctx.beginPath();\n ctx.ellipse(200, 200, 25, 20, 0, 0, 2 * Math.PI);\n ctx.fillStyle = lightBrown;\n ctx.fill();\n ctx.closePath();\n \n drawCircle(200, 195, 8, black); // Nose\n \n // Bowtie\n ctx.fillStyle = black;\n ctx.beginPath();\n ctx.moveTo(200, 280);\n ctx.lineTo(180, 270);\n ctx.lineTo(180, 290);\n ctx.fill();\n ctx.beginPath();\n ctx.moveTo(200, 280);\n ctx.lineTo(220, 270);\n ctx.lineTo(220, 290);\n ctx.fill();\n drawCircle(200, 280, 5, black);\n\n // Limbs (Simple)\n ctx.fillStyle = brown;\n ctx.fillRect(140, 320, 20, 100); // Left Arm\n ctx.fillRect(240, 320, 20, 100); // Right Arm\n \n // Legs\n ctx.fillStyle = brown;\n ctx.fillRect(160, 420, 20, 100); // Left Leg\n ctx.fillRect(240, 420, 20, 100); // Right Leg",[],[197],{"_106":206,"_99":207,"_167":208,"_169":-5,"_170":149,"_171":190,"_173":121,"_108":209,"_103":33,"_176":177,"_178":210,"_180":22,"_181":-5,"_182":211,"_102":212},"2accc420-2ddb-11f1-b711-42dde27851f2","style.css","019d498d-16be-774b-a803-50d81862ae3e",["D",1775055476352],"* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n}",[],[207],"files",[164,185,195,205],"counts",{"_217":33,"_218":190,"_219":190,"_220":221,"_224":225},"pulls","branches","forks","envVars",{"_222":33,"_223":33},"count","emptyCount","connections",{"_222":33,"_226":33},"unfilledCount","contents",[229,232,235,238],{"_106":165,"_99":166,"_167":168,"_169":-5,"_170":149,"_171":172,"_173":121,"_108":230,"_103":175,"_176":177,"_178":179,"_180":22,"_181":-5,"_102":231},["D",1775056302151],[166],{"_106":186,"_99":187,"_167":119,"_169":-5,"_170":149,"_171":188,"_173":121,"_108":233,"_103":190,"_176":191,"_178":192,"_180":22,"_181":-5,"_102":234},["D",1775066014661],[187],{"_106":196,"_99":197,"_167":198,"_169":-5,"_170":149,"_171":148,"_173":121,"_108":236,"_103":200,"_176":201,"_178":202,"_180":22,"_181":-5,"_102":237},["D",1775066025692],[197],{"_106":206,"_99":207,"_167":208,"_169":-5,"_170":149,"_171":190,"_173":121,"_108":239,"_103":33,"_176":177,"_178":210,"_180":22,"_181":-5,"_102":240},["D",1775055476352],[207],"upstreamProject",{"_106":157,"_99":243,"_114":115,"_116":-5,"_112":113,"_23":244},"html-canvas-demo1",{"_97":98,"_139":140},"upstreamBranch",{"_106":152,"_108":247,"_248":249,"_99":45,"_150":157,"_103":250,"_151":251,"_153":190,"_252":253,"_110":-5,"_161":22,"_112":113,"_160":98,"_16":125,"_159":243},["D",1774881181996],"updatedAt",["D",1775059408013],57,"4f3da514-2c45-11f1-a013-42dde27851f2","lockfileKey","1775067052769-esm.town_v_zakattack3289_html-canvas-demo1@57-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.remixes",{"_97":98,"_99":100,"_104":260,"_219":265,"_273":22,"_274":33,"_275":190,"_276":277},{"_106":107,"_99":100,"_108":261,"_110":-5,"_111":22,"_112":113,"_114":115,"_116":-5,"_14":117,"_118":119,"_120":121,"_122":-5,"_123":-5,"_124":33,"_16":125,"_126":-5,"_127":-5,"_128":-5,"_129":130,"_131":130,"_132":133,"_134":133,"_135":133,"_136":130,"_137":130,"_23":262,"_141":263,"_146":264,"_161":22},["D",1775055476352],{"_97":98,"_139":140},{"_97":98,"_143":140,"_14":117,"_144":145},{"_103":148,"_99":45,"_106":149,"_150":107,"_151":152,"_153":154,"_155":113,"_156":157,"_158":125,"_159":100,"_160":98},[266],{"_106":267,"_99":268,"_114":115,"_116":-5,"_112":113,"_14":117,"_16":125,"_161":22,"_23":269,"_141":270,"_118":271,"_120":121,"_108":272,"_124":33},"354ae934-2ddd-11f1-9f75-42dde27851f2","html-canvas-demo13",{"_97":98,"_139":140},{"_97":98,"_143":140,"_14":117,"_144":145},"019d499a-7726-735e-9a44-da521f9522fb",["D",1775056353024],"hasNext","page","forkCount","upstream",{"_106":157,"_99":243,"_114":115,"_116":-5,"_112":113,"_23":278},{"_97":98,"_139":140},"actionData","errors"]

zakattack3289

html-canvas-demo12