Skip to content
← Back to Community
Multiplayer Drawing Canvas
Profile icon
seanlnge

Multi-person Drawing Canvas


This canvas is multiplayer so anyone can change this screen. I was 'inspired' by Reddit's r/place which was a social experiment hosted on April 1st, 2017. It was a giant canvas where each person could change the color of one pixel, with a cooldown of 5 minutes.


In this version that I made, there is a 80 by 45 pixel space, and no cooldown time, so you can change as many pixels as you would like. You could even possibly make a bot to draw pixels for you.


How Do I Use This?

To use this canvas, all you need to do is to click on whichever pixel you would like to change, and press the key corresponding to the color you would like.


Colors:
  • Red - 1
  • Orange - 2
  • Yellow - 3
  • Green - 4
  • Light-Green - 5
  • Light-Blue - 6
  • Medium-Blue - 7
  • Blue - 8
  • Purple - 9
  • Magenta-Red - 0
  • Black - Minus Sign
  • White - Equal Sign

I used Node.JS and 2 frameworks, Express.JS for sending files, and Socket.IO for real-time web connections.


An upvote if you enjoyed it would be appreciated


Please let me know how it is and give me feedback

Thank you for trying this out!

Voters
Profile icon
Zeus386
Profile icon
matthewproskils
Profile icon
watermelon16
Profile icon
CodeSalvageON
Profile icon
ChezTacoz
Profile icon
IshaNair
Profile icon
AgastyaSandhuja
Profile icon
MrEconomical
Profile icon
generationXcode
Profile icon
Roar123
Comments
hotnewtop
Profile icon
ItsYeBoiJ

Capture

I was very bored lmao

Profile icon
seanlnge

@ItsYeBoiJ Thats insane! lmao how do you have the time to do that

Profile icon
ItsYeBoiJ

@SpicedSpices IM VERY BORED

Profile icon
[deleted]

My eyes... Good job on making this. But it will make my eyes explode.

Profile icon
seanlnge

@CodeABC123 lol thanks

Profile icon
MrEconomical

incredible job! love the concept

Profile icon
seanlnge

@MrEconomical thanks lol

Profile icon
ARJPEG

Nice!

Profile icon
seanlnge

@adityaru Thanks man!

Profile icon
HotCheetos2

Hey i want to make a mobile compatible version but I can't find the specific part of the code that assigns each number its color. (my idea is to add a little tool bar at the bottom with color buttons you can click and use)

Profile icon
seanlnge

@HotCheetos2

var hue = screen[i][j][0] + ','; var sat = screen[i][j][1] + '%,'; var lig = screen[i][j][2] + '%'; ctx.fillStyle = 'hsl(' + hue + sat + lig + ')';
Profile icon
matthewproskils

imageorange taking over

Profile icon
ChezTacoz

This is really cool and fun! :)

Profile icon
seanlnge

@ChezTacoz thank you!

Profile icon
IshaNair

SO MANY PIXELS!!! But I definitely think this is SOOOOOO AWESOME!!!

Profile icon
seanlnge

@IshaNair Thanks!!

Profile icon
[deleted]

what happened to it?

Profile icon
seanlnge

@TaylorLiang oh that sucks. Someone either has a really weird screen or they bypassed the safeguard I put up to stop incorrect data because I had a console.log() there. I just fixed it. That sucks that everyone's creations disappeared :(

Profile icon
generationXcode

neat

Profile icon
Roar123

Very cool! Let's hope Hi survives the wrath of the internet :)
Screenshot 2020-03-24 at 6.04.05 PM

Profile icon
seanlnge

@Roar123 nice that takes a lot of effort!

Profile icon
SilentShadowBla

Why is it just showing a black screen for me?

Profile icon
seanlnge

@SilentShadowBla You might have clicked or interacted with the screen before the page was fully loaded. Have you tried reloading it or opening it in another tab?

Profile icon
SilentShadowBla

yes i have must be my computer's problem or something, whatever, looking at the images in the comments, I say you did an amzing job! @SpicedSpices

Profile icon
SixBeeps

Black doesn't work :(

Great site, otherwise.

Profile icon
staticvoidliam7

「戸惑う言葉 与えられても 自分の心 ただ上の空 もし私から 動くのならば すべて変えるのなら 黒にする」

what does this mean lol
@SixBeeps

Profile icon
SixBeeps

@LiamDonohue Google it

Profile icon
staticvoidliam7
Profile icon
mwilki7

@SixBeeps
if your keyboard has a 'mute' function that works as black

Profile icon
seanlnge

@mwilki7 oh thanks for that!
@SixBeeps
I coded it to work with the keycodes instead of the key names so that is probably why. Sorry for that lol

Profile icon
SixBeeps

@mwilki7 Nope, I've got a normal keyboard.

EDIT: What the heck why does that work (Fn + F2)

Profile icon
DeBeast591

Cool! (I made the HI with the yellow BG)

Profile icon
seanlnge

@DeBeast591 Nice! Thanks for using it :)

Profile icon
kaldisberzins

image

Profile icon
seanlnge

@kaldisberzins This might of happened if you clicked or responded to the webpage before the screen loaded. Maybe trying it again or reloading it might help

Profile icon
JosiahKnisely

LMFO

Profile icon
Epicmuffinepic

This is awesome!

Profile icon
seanlnge
Profile icon
mkhoi

Wow! This is really cool!

Profile icon
seanlnge

@mkhoi Thanks for enjoying it!