Canvas context "bezierCurveTo" method usage - Javascript Canvas

Javascript examples for Canvas:Text

  1. HOME
  2. Javascript
  3. Canvas
  4. Text

Description

Canvas context "bezierCurveTo" method usage

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*from   w  ww  .jav a  2s  .c  om*/
var cv = document.getElementById('cv'), cxt = cv.getContext('2d'),

pts = [[100, 100], [400, 50], [350, 300], [100, 100]];

cxt.beginPath();
cxt.moveTo(pts[0][0], pts[0][1]);
cxt.bezierCurveTo(pts[1][0], pts[1][1], pts[2][0], pts[2][1], pts[3][0], pts[3][1]+1e-5);
cxt.stroke();
    });

      </script> 
   </head> 
   <body> 
      <canvas id="cv" width="500px" height="500px"></canvas>  
   </body>
</html>

Related Tutorials