[live web week 3] a broken drawing thing

Screenshot 2016-02-16 22.26.00

Things did not go well for me this week for this assignment. I had a lot of trouble getting this collaborative drawing page to work, and it still basically doesn’t, even after a fair amount of work. But I figured I’ll just document my code sorrows for now and sort it out at a later time.

My goal was to let two people collaboratively draw in one canvas in different colors, with neither person’s mouse affecting the other’s drawing. This proved harder than I thought it would be. I did manage to get the drawing to only happen while the person is clicking (though it seems wonky), and for the color to be randomized with each page reload.

I made two separate canvases so that each person’s drawing would not affect the other’s. I wanted to later the canvases on top of each other, but I couldn’t get that to work, so I just separated them. Now what happens is that you draw on the left box, and it shows up in the other person’s right box, in your color.

I also made an erase button that should wipe out your own box, but for some reason the image pops back up once you start drawing again.

On the plus side, I do feel like I’m starting to get a hang of how sockets work. I’m far from mastering it, but diving in this week has made me feel like I understand it way more than I did before.

Below is my extremely dysfunctional code.

https://gist.github.com/nicolehe/23415ff7b992d527f89e.js

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: