How to draw clouds on HTML5 Canvas

So basically clouds are shapes with a flat bottom and 3 curves on top (two on the sides on bigger one on the middle)

As i was creating a JS13K Game i wondered around googling if i'd find something as simple as that and 'i couldn't find anything interesting

So i took some pictures of simple animated clouds and sketched it on my notepad trying to reverse engineer shapes in the figure

In my first attempt i discovered that "the base is something similar to css pills, so there's rectangular shape with roundish edges and a circle overlay on top". Putting that into vanilla JavaScript i resorted to creating two canvases

1. foreground layer
2. background layer

Clouds are drawn using a solid color formed by four shapes 3 circles and a rectangle then using some alpha the resultant image is then overlay-ed onto the primary canvas.

Here's an example

It's a sneaky way todraw clouds so they got to be a cleanway todo this without Jumping extra hoops

Last resort was to strike three arcs and join their bottoms using a straight line (without using a secondary canvas)

Here's an example


Popular posts from this blog

How to set content disposition header for nginx server to force content download

Animated daylight on HTML5 Canvas

How to make a static http server in nodejs using express

How to make a Snake Game using JavaScript and html5

JS13K Preparation