Basic canvas

Draw a dotted line around canvas:

Click(3x) to draw a box on canvas:

Methods:
fillRect(x, y, width, height)
strokeRect(x, y, width, height)
clearRect(x, y, width, height)

 

Gradients

using an existing img

sleeping cat

load img to canvas

using entirely JavaScript to load img

resized and repeated inside one canvas

Layer img on top of each other using the same img file inside canvas

Methods:
accepts three, five, or nine arguments
drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)