365 days on canvas, is a project where I spent 20 minutes every day on the <canvas> tag. More about it here.

Here is the work of the last 7 days.

Day 8

I promised a better beach last week and here it is: better colors, better horizon and better waves. There’s even some foam!

Waves are arcTo() calls with a translate() and a y-scale() transformations. Transformation amplitude is based on a sine function. Foam and water are drawn with the same path, stroked in white then filled in blue.

As usual, click the canvas to start/stop the animation:

Day 9

I removed the eye-hurting background and replaced it with a simple sunny blue sky. SquareMan is alone again.

Day 10

I also promised a shark last week.

The fin is made of two arcTo() and a closePath(). Movement is an ellipse ( 5 cosα x, 3 sinα y), fin orientation is based on the sign of cosα.

Day 11

Some quadraticCurveTo() to draw a nice umbrella.

Day 12

Wet sand. It took me some time but I realised that reusing the path that I used for the waves, with a 10 pixels translation and a π/6 phase offset was good enough.

Days 13-14

It took me 40 minutes to draw this speech bubble. “What took you so long?” you might ask. Maybe the fact that the bubble is automatically sized to fit the text.

Tip: you can measure the width of a string with measureText().

Next

I think I kept my promises: the beach is really better and there’s a shark. I’m quite proud of what I’ve achieved in these 14 * 20 minutes.

What do you think? What do you want next?