milliondollarpaint - A real-time multi-user drawing web app

wobsoriano profile image Robert Updated on ・1 min read

What I built

Ever heard of the milliondollarhomepage? It's a website that consisted of a million pixels arranged in a 1000 × 1000 pixel grid; the image-based links on it were sold for $1 per pixel in 10 × 10 blocks. More info here.

I created something similar, and instead of links, users will be able to draw in each pixel and let others see it in real-time.

Yes, I've seen a lot of posts using Twilio's sms, video and other communication APIs that will be helpful to the community in this crisis and I think that's enough already. I'm more of a "battle the loneliness" person and want other people to connect and just have fun.

Demo Link


Link to Code


How I built it

I used HTML Canvas for creating and drawing graphics and JavaScript and Vue for manipulation of the Canvas. Each pixel has an x and y coordinate and will be saved in a shared state using Twilio Sync. Twilio Sync offers us two-way real-time communication between different devices.

Detailed stack:

  • Node
  • JavaScript
  • Twilio
  • Vue
  • Vuetify
  • HTML
  • CSS

Additional Resources/Info

When testing, open up 2 browsers. Stay at the homepage for the first browser, and try to draw anything on the 2nd browser and click save to see the real-time magic happen using Twilo Sync!

Also, I am using heroku free tier so it might take some time on your first load.

Posted on by:

wobsoriano profile



Apparently, this user prefers to keep an air of mystery about them.


markdown guide

Hey Robert, Love the idea! Let me know if you need some help testing.✏️ I think we could all do with some gentle distraction apps right about now.


Hi Megan, will do! Thank you for taking your time here.


Hi Megan! I think you can try testing it.

The url is milliondollarpaint.herokuapp.com

Try to open 2 browsers at the same time to see updates! Thank you.


Day 2


  • Homepage and Drawing page
  • Ability do draw in canvas


  • Show user drawings in the homepage for each pixel
  • Save drawings in Twilio Sync
  • Load drawings in Twilio Sync in real-time
  • Export drawing as image

Day 3


  • Show user drawings in the homepage for each pixel
  • Subscribe to real-time painting updates using Twilio Sync


  • Export drawing as image
  • Validate coordinates in drawing page

Day 4


  • Export drawing as image


  • Validate coordinates in drawing page

Thanks for laying out your submission. I'm going to borrow your strategy for sharing TODO / Done underneath. That's a cool idea. So is your idea! Good luck.


Day 1


  • Initial project setup


  • Initial UI for canvas drawing
  • Review Twilio Sync docs