HW9: Canvas

In this homework you will convert your boards into something that behaves more like a real-world pinboard. You will do this by using the canvas element.

Specifically, the new url /canvas/123 will correspond to the same board as /board/123 but the board will be shown in a canvas object of 854x480 pixels. The images will all be scaled to 200x200 pixels (in the browser, and for now, we will fix this in upcoming homeworks). The owner of the board will be able to move the images around by just clicking on one and moving it around. When the user moves the mouseup, the image will stay, there.

That is, your board entity will now need to store the x,y coordinate of each pin. These values are to be dynamically sent, via XHR requests, back to the server as the owner of the board moves the images on the board, as I demonstrate in the video below:



Note that you cannot use any third-party libraries for this homework, except jQuery. I know there are libraries out there that do canvas drag-an-drop, but you will learn more by doing this yourself.

Also notice that one pin can be in multiple boards.

Required Reading

The new topic for this week is canvas, you will want to read the canvas tutorial and the Using images tutorial that explains how to use the drawImage primitive, which is what you will need to use to draw the photos.

As always, publish your final code to appspot, and push it to your private github repo by Monday, November 5 @9am.