Code: https://github.com/emilylin-itp/live-web/tree/gh-pages/wk3/color-a-blank-code%20final

Try it out! http://el3015.itp.io:8080/index.html

—

Wk 3 Continued: 09/26/19 – 10/04/19 (version 2)

I decided to continue working on the collaborative drawing project from last week because it didn’t turn out how I had imagined. It’s also good to just get more socket practice! There are so many features I still want to add, but at some point I need to call it done and move on. So, it is done for now!

The issues I managed to resolve for this round: a.) having the user’s drawing and the image background scale together, b.) include different images to choose from like a coloring book, c.) also include different colors users could choose from, d.) get the redraw button to work, e.) colors remain the same color when user refreshes

Thank you: Biggest thank you to Professor Shawn for solving the black line issue and resident Dan for helping me figure out why the color was not emitting for the other user properly. Just amazing!

—

Helpful References: 

• https://stackoverflow.com/questions/14012768/html5-canvas-background-image
• https://stackoverflow.com/questions/41196399/setting-up-background-image-for-a-canvas
• https://www.w3schools.com/jsref/met_win_open.asp
• https://weworkweplay.com/play/saving-html5-canvas-as-image/
• https://stackoverflow.com/questions/11112321/how-to-save-canvas-as-png-image
• http://www.unionplatform.com/?page_id=2762
• https://stackoverflow.com/questions/16607999/socket-io-socket-emit-socket-on-socket-send
• https://stackoverflow.com/questions/53208401/javascript-canvas-change-drawing-color
• https://css-tricks.com/basics-css-blend-modes/
• https://eloquentjavascript.net/17_canvas.html
• https://medium.com/@danielsternlicht/capturing-dom-elements-screenshots-server-side-vs-client-side-approaches-6901c706c56f
• https://html2canvas.hertzen.com/
• https://stackoverflow.com/questions/53220778/socket-io-multiple-pages