A real-time collaborative pixel art canvas powered by PubNub. Draw together with people around the world in real-time!

• Real-time Collaboration: See other users' drawings appear instantly
• 50x50 Pixel Grid: Large canvas for detailed artwork
• 16 Colors: Curated color palette for creative expression
• Clear Canvas: Reset the entire canvas (affects all users)
• Random Art Generator: Create random pixel patterns for fun
• Live User Count: See how many people are drawing with you
• Pixel Counter: Track total pixels drawn
• Responsive Design: Works on desktop and mobile devices

The application uses PubNub's real-time messaging infrastructure to synchronize pixel changes across all connected users:

1. Publishing: When a user draws a pixel, the coordinates and color are published to a PubNub channel
2. Subscribing: All connected users subscribe to the same channel and receive pixel updates in real-time
3. Presence: PubNub's presence feature tracks online users
4. State Sync: New users request the current canvas state from existing users

• PubNub JavaScript SDK: Real-time messaging and presence
• HTML5 Canvas: High-performance pixel rendering
• Vanilla JavaScript: No frameworks, just pure JS
• CSS3: Modern, responsive styling

1. Open index.html in a web browser
2. Select a color from the palette
3. Click on the canvas to draw pixels
4. Open the same page in another browser/tab to see real-time collaboration!

This app uses PubNub's demo keys for quick testing. The demo keys are:

• Publish Key: demo
• Subscribe Key: demo

For production use, you should:

1. Sign up for a free PubNub account at https://www.pubnub.com/
2. Create a new app and get your own keys
3. Replace the demo keys in app.js

.
├── index.html    # Main HTML structure
├── style.css     # Styling and responsive design
├── app.js        # PubNub integration and canvas logic
└── README.md     # This file

• Click any pixel on the grid to draw
• Changes are instantly broadcast to all connected users
• Smooth, lag-free experience thanks to PubNub's edge network

16 carefully selected colors including:

• Primary colors (Red, Green, Blue)
• Secondary colors (Yellow, Magenta, Cyan)
• Additional colors (Orange, Purple, Pink, Brown, Gray, Gold, Indigo, Light Green)
• Black and White

• Clear Canvas: Removes all pixels and syncs with all users
• Random Art: Generates 100 random colored pixels for creative inspiration

• User Count: Shows active collaborators in real-time
• Pixel Count: Displays total pixels on the canvas

Works in all modern browsers that support:

• HTML5 Canvas
• ES6 JavaScript
• CSS3

MIT License - Feel free to use and modify!

Built with ❤️ using PubNub's real-time infrastructure