HTML Canvas Project Creating Shapes and Resizing On Edges

Here is what needs to be done
Place rectangle, square, l-shape, and a static shape into canvas
select shape and enter dimensions
select shape and rotate by clicking the rotate button
select the shape and resize by pulling from edges
select shape and add 'x' or 'o' to edges like in example will be provided
select from picture box and add background image into the selected shape
save shape data that is feet square and background image into local storage