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:
- 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); ...
Get HTML5 Canvas Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.