HTML5 Canvas Cookbook

Fun with Bezier curves: drawing a cloud

In this recipe, we will learn how to draw a custom shape by connecting a series of Bezier curve sub paths to create a fluffy cloud.

How to do it...

Follow these steps to draw a fluffy cloud in the center of the canvas:

1. Define a 2D canvas context:

   window.onload = function(){
       var canvas = document.getElementById("myCanvas");
       var context = canvas.getContext("2d");

2. Draw a cloud by connecting six Bezier curves:

    var startX = 200; var startY = 100; // draw cloud shape context.beginPath(); context.moveTo(startX, startY); context.bezierCurveTo(startX - 40, startY + 20, startX - 40, startY + 70, startX + 60, startY + 70); ...