Drawing a flag

Using the knowledge of Bezier curves you can develop various examples of your own. Here is a recipe whose output looks like this:

How to do it...

If you observe the drawing of a flag, you can easily understand that it's drawn using a combination of a line, a Bezier curve, and a circle. Here is our recipe:

<html>
<head>
<title>A Flag</title>
<script>
  function init()
  {
    can = document.getElementById("MyCanvasArea"); 
    ctx = can.getContext("2d");
    var xstart = 50;   var ystart = 25;
    var xctrl1 = 100;  var yctrl1 = 10;
    var xctrl2 = 100;  var yctrl2 = 70;
    var xend = 180;  var yend = ystart;

    //10 curves having orange color
    for(i=1;i<=10;i++)
    {
      drawBezierCurve(xstart,ystart,xctrl1,yctrl1,xctrl2,yctrl2,xend, yend,"orange");
      ystart+=5;yend+=5;yctrl1+=5;yctrl2+=5;
    }
    //10 curves having white color
    for(j=1;j<=10;j++)
    {
      drawBezierCurve(xstart,ystart,xctrl1,yctrl1,xctrl2,yctrl2,xend,yend,"white");
      ystart+=5;yend+=5;yctrl1+=5;yctrl2+=5;
    }
    //10 curves having green color
    for(j=1;j<=10;j++)
    {
      drawBezierCurve(xstart,ystart,xctrl1,yctrl1,xctrl2,yctrl2,xend,yend,"green");
      ystart+=5;yend+=5;yctrl1+=5;yctrl2+=5;
    }
    //the ashoka wheel we draw two arcs and lines
    x1=120;
    y1=113;
    drawArc(x1,y1,22,0,360,false,"navy");
    //draw a stand for the flag
    drawLine(50,350,50,20,10,"brown");
  }
function drawBezierCurve(xstart,ystart,xctrl1,yctrl1,xctrl2,yctrl2,xend,yend,color,width)
{   
    ctx.strokeStyle=color;
    ctx.lineWidth=6;
    ctx.beginPath();
    ctx.moveTo(xstart,ystart);
    ctx.bezierCurveTo(xctrl1,yctrl1,xctrl2,yctrl2,xend,yend);
    ctx.stroke();
}
function drawArc(xPos,yPos,radius,startAngle,endAngle,anticlockwise,lineColor)
{
    var startAngle = startAngle * (Math.PI/180);
    var endAngle   = endAngle   * (Math.PI/180);
    var radius = radius;
    ctx.strokeStyle = lineColor;
    ctx.fillStyle="navy";
    ctx.lineWidth   = 4;
    ctx.beginPath();
    ctx.arc(xPos,yPos,radius,startAngle,endAngle,anticlockwise);
    ctx.fill();
    ctx.stroke();  
}
function drawLine(xstart,ystart,xend,yend,width,color)
{
    ctx.beginPath();
    ctx.strokeStyle=color;
    ctx.lineWidth=width;
    ctx.moveTo(xstart,ystart);  
    ctx.lineTo(xend,yend);
    ctx.stroke();
    ctx.closePath();
}
</script>
</head>
<body onload="init()">
  <canvas id="MyCanvasArea" width ="300"  height="400" style="border:2px solid black">
    Your browser doesn't currently support HTML5 Canvas.
  </canvas>
</body>
</html>

How it works...

In the recipe, you will notice that the function to draw a Bezier curve is called 10 times through a loop for different coordinates and colors. Other than this, a vertical line with a thickness of 10 is drawn. For this, the function drawLine() is called specifying the appropriate parameters.

Canvas Cookbook

By : Purushottam Joshi

Canvas Cookbook

By: Purushottam Joshi

Overview of this book

Drawing a flag

How to do it...

How it works...

Canvas Cookbook

By : Purushottam Joshi

Canvas Cookbook

By: Purushottam Joshi

Overview of this book

Drawing a flag

How to do it...

How it works...

Delete Bookmark