/en/tags/canvas/ Recent content in Canvas on Wayne X.Y. Blog Hugo en Thu, 26 Feb 2026 00:00:00 +0000 /en/2026/02/26/playground-pixel-art-implementation/ Thu, 26 Feb 2026 00:00:00 +0000 /en/2026/02/26/playground-pixel-art-implementation/ <h1 id="building-a-micro-world-playground-pixel-art-and-pathfinding-implementation">Building a Micro-World: Playground Pixel Art and Pathfinding Implementation</h1> <p> <img src="/img/playground/playground_overview.png" alt="Playground Overview"> </p> <p>Recently, while coding, I came across an interesting project on GitHub called <a href="https://github.com/pablodelucca/pixel-agents">Pixel Agents</a>. It simulates AI agents during coding as tiny pixel-style characters working in an office, which looks incredibly cute 😆. Because I really love pixel art, I wondered if I could bring a similar vibe to my own website. That&rsquo;s how this <a href="/en/playground/">Playground</a> came to be.</p> <p>This post will share the implementation details behind this little world, covering how to render crisp pixel art using HTML5 Canvas, designing the states for the characters, and how they navigate the room (BFS pathfinding algorithm).</p>