Pixel Canvas

One shared mural. Fifty pixels per player. A reason to return tomorrow.

Comment

Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for Pixel Canvas

Inspiration

A collaborative canvas is a natural fit for Reddit because the interesting part is not a solo score. It is watching a community decide what survives on the board. The basic action takes one tap, but every pixel changes a public object that other people can continue, repair, or overwrite.

The design question was how to add a daily hook without turning the game into a list of engagement tasks. Every player receives the same 50-pixel budget. Rankings, missions, streaks, and Pixel Drop tickets make those pixels matter. Posting, commenting, and following are not rewarded or required.

What It Does

Players select a color, pan and zoom across a 1000 x 1000 board, and paint cells on a persistent community mural. The client applies each valid paint immediately. It then validates queued paints one at a time on the server and reconciles realtime messages by timestamp, so latency does not stop someone from drawing.

Every accepted paint advances daily and weekly leaderboards. The progress panel shows the player's current rank, the gap to the next person, daily missions, paint streak, Pixel Drop tickets, and recent painters. At the end of each UTC day, the top three ticket holders and one weighted draw winner are settled and stored.

The same board can appear in its root post or a native Reddit crosspost. Those surfaces resolve to one canonical board ID and realtime channel. A Safety tab lets players report the center pixel, erase with white, and delete stored game activity. Moderators can clear reported pixels from the post menu.

How It Was Built

Development started on July 10, 2026, during this hackathon's submission period. Pixel Canvas did not exist before this event.

The frontend uses Phaser 4 with its Canvas renderer. It renders only the visible grid cells, painted pixels, recent-painter markers, controls, and responsive progress panel. Paints are optimistic on the client and are held in a FIFO validation queue.

The Devvit Web backend uses Hono routes, authenticated Reddit context, Devvit Redis, installation and post-deletion triggers, and Devvit Realtime. Pixels are stored sparsely by coordinate without usernames. Daily limits use atomic counters. Sorted sets back the rankings and event tickets. Claim keys make mission and streak rewards idempotent.

Canonical board resolution follows Reddit post data and crosspost parents. Persistent mural records contain only coordinate, color, and timestamp. Player profiles expire after three days, weekly ranking data expires after 14 days, and the player can delete retained game activity from inside the app.

Challenges

The first challenge was making painting feel immediate while the server stayed authoritative. A single in-flight lock made every pixel wait for the previous network response. The final client lets the player paint different cells freely, validates them in order, rolls back only rejected optimistic pixels, and defers conflicting realtime updates until the matching request settles.

The second challenge was keeping a 1000 x 1000 world usable inside Reddit's changing post sizes. The game uses a stable header and footer, explicit viewport bounds, pooled Phaser text objects, a compact progress layout for short screens, and separate portrait and landscape checks.

The third challenge was making user-contributed pixels manageable without collecting more identity data than the game needs. New pixel records omit usernames, legacy records are sanitized on load, reports contain only a coordinate and count, and deletion removes retained player progress.

Accomplishments

  • Multiple paints appear immediately while server validation remains FIFO.
  • Root posts and native crossposts can show one canonical live board.
  • Daily and weekly rank, rank-to-next, streaks, missions, and Pixel Drop all use server-owned state.
  • Realtime reconciliation handles missed connections, UTC rollover, deferred same-pixel events, and stale event ordering.
  • The same controls and progress views fit desktop, mobile portrait, and short landscape layouts.
  • The 50-pixel budget stays equal for every player and is never gated by a Reddit action.
  • Players can report or erase cells and delete retained game activity. Mods can clear reported cells without opening a separate dashboard.

What I Learned

The main lesson was that realtime UI and realtime truth are different problems. The canvas has to respond before the network, but every optimistic change still needs an identity, previous value, validation order, and a clear rule for later server events.

The Reddit-specific lesson was that the post is not just a container. Native crossposts can extend one board into another feed surface, while comments can remain the ordinary discussion layer. The game should not pay people to post, comment, or subscribe.

What's Next

The next useful layer is community coordination rather than more currencies. Communities could pin a daily drawing target, divide the board into team regions, or vote on a template. A board replay and a per-report moderator queue would make large public canvases easier to review and more interesting to revisit.

Built With

Share this project:

Updates