Until now we have learned how to draw basic shapes such as lines, arcs, curves, andrectangles. However, using this knowledge you can draw various shapes, such as a pentagon, a hexagon, a cloud, and so on. Our new recipe shows you how. In addition, it also shows you the different ways of filling these shapes with different effects:
The output of our recipe is as follows:
The recipe is given as follows.
The HTML code:
<html> <head> <title>Clouds</title> <script src="clouds.js"></script> </head> <body onload="init()"> <canvas id="MyCanvasArea" width="800" height="300" style="border:2px solid blue;" > your browser does not support canvas</canvas> <h1>Cloudy Sky</h1> </body> </html>
The JavaScript code:
var can;
var ctx;
var color;
function init()
{
can=document.getElementById("MyCanvasArea");
ctx=can.getContext("2d");
//set the gradient
color=ctx.createLinearGradient...