How to draw the different shapes(Bezier,Quadratic) in html canvas

 

HTML5 Canvas - Drawing Bezier Curves

 

We need the following methods to draw Bezier curves on the canvas

 

S.No.

Method and Description

1

beginPath()

This method resets the current path.

2

moveTo(x, y)

This method creates a new subpath with the given point.

3

closePath()

This method marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.

4

fill()

This method fills the subpaths with the current fill style.

5

stroke()

This method strokes the subpaths with the current stroke style.

6

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

This method adds the given point to the current path, connected to the previous one by a cubic Bezier curve with the given control points.

The x and y parameters in bezierCurveTo() method are the coordinates of the end point. cp1x and cp1y are the coordinates of the first control point, and cp2x and cp2y are the coordinates of the second control point.

<!DOCTYPE HTML>

 

<html>

   <head>

     

      <style>

         #test {

            width: 100px;

            height:100px;

            margin: 0px auto;

         }

      </style>

     

      <script type = "text/javascript">

         function drawShape() {

           

            // get the canvas element using the DOM

            var canvas = document.getElementById('mycanvas');

           

            // Make sure we don't execute when canvas isn't supported

            if (canvas.getContext) {

           

               // use getContext to use the canvas for drawing

               var ctx = canvas.getContext('2d');

              

               ctx.beginPath();

               ctx.moveTo(75,40);

              

               ctx.bezierCurveTo(75,37,70,25,50,25);

               ctx.bezierCurveTo(20,25,20,62.5,20,62.5);

              

               ctx.bezierCurveTo(20,80,40,102,75,120);

               ctx.bezierCurveTo(110,102,130,80,130,62.5);

              

               ctx.bezierCurveTo(130,62.5,130,25,100,25);

               ctx.bezierCurveTo(85,25,75,37,75,40);

              

               ctx.fill();

            } else {

               alert('You need Safari or Firefox 1.5+ to see this demo.');

            }

         }

      </script>

   </head>

  

   <body id = "test" onload = "drawShape();">

      <canvas id = "mycanvas"></canvas>

   </body>

  

</html>

Transformation

HTML5 canvas provides methods which allow modifications directly to the transformation matrix. The transformation matrix must initially be the identity transform. It may then be adjusted using the transformation methods.

Sr.No.

Method and Description

1

transform(m11, m12, m21, m22, dx, dy)

This method changes the transformation matrix to apply the matrix given by the arguments.

2

setTransform(m11, m12, m21, m22, dx, dy)

This method changes the transformation matrix to the matrix given by the arguments.

The transform(m11, m12, m21, m22, dx, dy) method must multiply the current transformation matrix with the matrix described by −

m11     m21     dx

m12     m22     dy

0       0             1

The setTransform(m11, m12, m21, m22, dx, dy) method must reset the current transform to the identity matrix, and then invoke the transform(m11, m12, m21, m22, dx, dy) method with the same arguments.

<!DOCTYPE HTML>

 

<html>

   <head>

     

      <script type = "text/javascript">

         function drawShape() {

           

            // get the canvas element using the DOM

            var canvas = document.getElementById('mycanvas');

           

            // Make sure we don't execute when canvas isn't supported

            if (canvas.getContext) {

           

               // use getContext to use the canvas for drawing

               var ctx = canvas.getContext('2d');

           

               var sin = Math.sin(Math.PI/6);  

               var cos = Math.cos(Math.PI/6);  

           

               ctx.translate(200, 200);  

               var c = 0;

           

               for (var i=0; i <= 12; i++) {

                  c = Math.floor(255 / 12 * i);

                  ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";

                  ctx.fillRect(0, 0, 100, 100);

                  ctx.transform(cos, sin, -sin, cos, 0, 0);

               }

            

               ctx.setTransform(-1, 0, 0, 1, 200, 200);

               ctx.fillStyle = "rgba(100, 100, 255, 0.5)";

               ctx.fillRect(50, 50, 100, 100);

            } else {

               alert('You need Safari or Firefox 1.5+ to see this demo.');

            }

         }

      </script>

   </head>

  

   <body onload = "drawShape();">

      <canvas id = "mycanvas" width = "400" height = "400"></canvas>

   </body>

  

</html>

 

 Composition

HTML5 canvas provides compositing attribute globalCompositeOperation which affect all the drawing operations.

We can draw new shapes behind existing shapes and mask off certain areas, clear sections from the canvas using globalCompositeOperation attribute as shown below in the example.

There are following values which can be set for globalCompositeOperation –

 

Sr.No.

Attribute & Description

1

source-over

This is the default setting and draws new shapes on top of the existing canvas content.

2

source-in

The new shape is drawn only where both the new shape and the destination canvas overlap. Everything else is made transparent.

3

source-out

The new shape is drawn where it doesn't overlap the existing canvas content.

4

source-atop

The new shape is only drawn where it overlaps the existing canvas content.

5

lighter

Where both shapes overlap the color is determined by adding color values.

6

xor

Shapes are made transparent where both overlap and drawn normal everywhere else.

7

destination-over

New shapes are drawn behind the existing canvas content.

8

destination-in

The existing canvas content is kept where both the new shape and existing canvas content overlap. Everything else is made transparent.

9

destination-out

The existing content is kept where it doesn't overlap the new shape.

10

destination-atop

The existing canvas is only kept where it overlaps the new shape. The new shape is drawn behind the canvas content.

11

darker

Where both shapes overlap the color is determined by subtracting color values.

 

<!DOCTYPE HTML>

 

<html>

   <head>

     

      <script type = "text/javascript">

         var compositeTypes = [

            'source-over','source-in','source-out','source-atop',

            'destination-over','destination-in','destination-out',

            'destination-atop','lighter','darker','copy','xor'

         ];

        

         function drawShape() {

            for (i=0;i<compositeTypes.length;i++) {

               var label = document.createTextNode(compositeTypes[i]);

               document.getElementById('lab'+i).appendChild(label);

               var ctx = document.getElementById('tut'+i).getContext('2d');

              

               // draw rectangle

               ctx.fillStyle = "#FF3366";

               ctx.fillRect(15,15,70,70);

              

               // set composite property

               ctx.globalCompositeOperation = compositeTypes[i];

              

               // draw circle

               ctx.fillStyle = "#0066FF";

               ctx.beginPath();

               ctx.arc(75,75,35,0,Math.PI*2,true);

               ctx.fill();

            }

         }

      </script>

   </head>

  

   <body onload = "drawShape();">

      <table border = "1" align = "center">

         <tr>

            <td><canvas id = "tut0" width = "125" height = "125"></canvas><br/>

               <label id = "lab0"></label>

            </td>

           

            <td><canvas id = "tut1" width = "125" height = "125"></canvas><br/>

               <label id = "lab1"></label>

            </td>

           

            <td><canvas id = "tut2" width = "125" height = "125"></canvas><br/>

               <label id = "lab2"></label>

            </td>

         </tr>

        

         <tr>

            <td><canvas id = "tut3" width = "125" height = "125"></canvas><br/>

               <label id = "lab3"></label>

            </td>

           

            <td><canvas id = "tut4" width = "125" height = "125"></canvas><br/>

               <label id = "lab4"></label>

            </td>

           

            <td><canvas id = "tut5" width = "125" height = "125"></canvas><br/>

               <label id = "lab5"></label>

            </td>

         </tr>

        

         <tr>

            <td><canvas id = "tut6" width = "125" height = "125"></canvas><br/>

               <label id = "lab6"></label>

            </td>

           

            <td><canvas id = "tut7" width = "125" height = "125"></canvas><br/>

               <label id = "lab7"></label>

            </td>

           

            <td><canvas id = "tut8" width = "125" height = "125"></canvas><br/>

               <label id = "lab8"></label>

            </td>

         </tr>

        

         <tr>

            <td><canvas id = "tut9" width = "125" height = "125"></canvas><br/>

               <label id = "lab9"></label>

            </td>

           

            <td><canvas id = "tut10" width = "125" height = "125"></canvas><br/>

               <label id = "lab10"></label>

            </td>

           

            <td><canvas id = "tut11" width = "125" height = "125"></canvas><br/>

               <label id = "lab11"></label>

            </td>

         </tr>        

      </table>

     

   </body>

</html>

 

Animation

 

<!DOCTYPE HTML>

 

<html>

   <head>

     

      <script type = "text/javascript">

         var pattern = new Image();

        

         function animate() {

            pattern.src = 'E:/flower.png';

            setInterval(drawShape, 100);

         }

        

         function drawShape() {

           

            // get the canvas element using the DOM

            var canvas = document.getElementById('mycanvas');

           

            // Make sure we don't execute when canvas isn't supported

            if (canvas.getContext) {

           

               // use getContext to use the canvas for drawing

               var ctx = canvas.getContext('2d');

              

               ctx.fillStyle = 'rgba(0,0,0,0.4)';

               ctx.strokeStyle = 'rgba(0,153,255,0.4)';

               ctx.save();

               ctx.translate(150,150);

              

               var time = new Date();

               ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ( (2*Math.PI)/6000)*time.getMilliseconds() );

               ctx.translate(0,28.5);

               ctx.drawImage(pattern,-3.5,-3.5);

               ctx.restore();

            } else {

               alert('You need Safari or Firefox 1.5+ to see this demo.');

            }

         }

      </script>

   </head>

  

   <body onload = "animate();">

      <canvas id = "mycanvas" width = "400" height = "400"></canvas>

   </body>

  

</html>

 

Quadratic

 

<!DOCTYPE HTML>

 

<html>

   <head>

            <style>

         #test {

            width: 100px;

            height:100px;

            margin: 0px auto;

         }

      </style>

            <script type = "text/javascript">

         function drawShape() {

           

            // get the canvas element using the DOM

            var canvas = document.getElementById('mycanvas');

           

            // Make sure we don't execute when canvas isn't supported

            if (canvas.getContext) {

              

               // use getContext to use the canvas for drawing

               var ctx = canvas.getContext('2d');

              

               // Draw shapes

               ctx.beginPath();

              

               ctx.moveTo(75,25);

               ctx.quadraticCurveTo(25,25,25,62.5);

              

               ctx.quadraticCurveTo(25,100,50,100);

               ctx.quadraticCurveTo(50,120,30,125);

              

               ctx.quadraticCurveTo(60,120,65,100);

               ctx.quadraticCurveTo(125,100,125,62.5);

              

               ctx.quadraticCurveTo(125,25,75,25);

               ctx.stroke();

            } else {

               alert('You need Safari or Firefox 1.5+ to see this demo.');

            }

         }

      </script>

   </head>

  

   <body id = "test" onload = "drawShape();">

      <canvas id = "mycanvas"></canvas>

   </body>

  

</html>

Comments

Post a Comment

Popular posts from this blog

How to create Animated 3d chart with R.

  The rgl package is the best option to build 3d charts in R. Please see this post for an introduction to 3d scatterplots using it. It also provides the plot3d() and play3d() functions that allow to animate the 3d chart, and eventually to export the result at a .gif format. Here is an application to the famous iris dataset, with a nice animated 3d scatterplot chart. Arguments x, y, z vectors of points to be plotted. Any reasonable way of defining the coordinates is acceptable. See the function  xyz.coords  for details. xlab, ylab, zlab labels for the coordinates. type For the default method, a single character indicating the type of item to plot. Supported types are: 'p' for points, 's' for spheres, 'l' for lines, 'h' for line segments from z = 0, and 'n' for nothing. For the mesh3d method, one of 'shade', 'wire', or 'dots'. Partial matching is used. col the color to be used for plotted...
Read more

Linux/Unix Commands frequently used

  Linux/Unix Commands ls  --- lists your files ls -l  --- lists your files in 'long format', which contains lots of useful information, e.g. the exact size of the file, who owns the file and who has the right to look at it, and when it was last modified. ls -a  --- lists all files, including the ones whose filenames begin in a dot, which you do not always want to see. There are many more options, for example to list files by size, by date, recursively etc. more  filename  --- shows the first part of a file, just as much as will fit on one screen. Just hit the space bar to see more or  q  to quit. You can use  / pattern  to search for a pattern. gzip  filename  --- compresses files, so that they take up much less space. Usually text files compress to about half their original size, but it depends very much on the size of the file and the nature of the co...
Read more

R Programming Introduction

R Download Link- https://cran.r-project.org/bin/windows/base/old/3.4.0/ R Studio Download link- https://www.rstudio.com/products/rstudio/download/  R is a programming language and software environment for statistical analysis, graphics representation and reporting. R was created by Ross Ihaka and Robert Gentleman at the University of Auckland, New Zealand, and is currently developed by the R Development Core Team. The core of R is an interpreted computer language which allows branching and looping as well as modular programming using functions. R allows integration with the procedures written in the C, C++, .Net, Python or FORTRAN languages for efficiency. R is freely available under the GNU General Public License, and pre-compiled binary versions are provided for various operating systems like Linux, Windows and Mac. R is free software distributed under a GNU-style copy left, and an official part of the GNU project called  GNU S . Evolution of R R was initially writ...
Read more