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.
Follow these steps to draw a fluffy cloud in the center of the canvas:
Define a 2D canvas context:
window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
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); context.bezierCurveTo(startX + 80, startY + 100, startX + 150, startY + 100, startX + 170, startY + 70); context.bezierCurveTo(startX + 250, startY + 70, startX + 250, startY + 40, startX + 220, startY + 20); context.bezierCurveTo(startX + 260, startY - 40, startX + 200, startY - 50, startX + 170,...