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



Comments

Post a Comment

Popular posts from this blog

Hello world application in Kotlin

-
Kotlin Hello World Application To get started open your editor and type the snippet of code below fun main() {     println("Hello, World!") } in kotlin main is the entry point function of an application fun keyword is used for declaring functions it acts like function does in JavaScript. Compile your application into jar kotlinc hello.kt -include-runtime -d hello.jar Execute your application java -jar hello.jar If everything went well you should see "Hello World" output from your terminal
Read more

Introduction to webshare API (navigator.share)

-
Image
navigator.share is a JavaScript API providing a sharing interface similar to native apps webshare API is supported on most updated mobile browsers Including Google chrome for Android Sharing is done by passing an Object with parameters "url", "text" or "title" to navigator.share function. For a webshare request to succeed you must supply at lest one of the parameters navigator.share returns a Promise upon being called "upon navigator.share({     "url": document.location,     "text": "I'm an example",     "title": document.title }) .then(resp => console.info("Successfully shared")) .catch(errors => console.error(errors))
Read more

How to set content disposition headers for express nodejs apps

-
Image
In express nodejs apps you can force the user agent "browser" to rather download content instead of displaying or attempting to render given content within the browser. In this example assuming you're using express.static to serve content pass an Object as second argument to express.static function An Object with configuration parameters; const config = { setHeaders: res => res.set('Content-disposition',  'attachment') } In your code replace "path/to/media/" with the path pointing to the static content. app.use('/media/', express.static('path/to/media/', config)) To test try accessing content at /media/*
Read more