HTML5 Game - Canvas Bezier Curve

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Bezier Curve

Introduction

Bezier is also called cubic curves.

The Bezier curve is the most advanced curvature available with the HTML5 canvas API.

Demo

ResultView the demo in separate window 

<html>
    <head>
        <script>
            window.onload = function(){
                let canvas = document.getElementById("myCanvas");
                let context = canvas.getContext("2d");
        //from w  w w. j  a  v a2s  . co  m
                context.lineWidth = 10;
                context.strokeStyle = "black"; // line color
                context.moveTo(180, 130);
                context.bezierCurveTo(150, 10, 420, 10, 420, 180);
                context.stroke();
            };
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
        </canvas>
    </body>
</html>

Note

HTML5 canvas Bezier curves are defined by the context point, two control points, and an ending point. 

context.bezierCurveTo(controlPointX1, 
                      controlPointY1,  
                      controlPointX2, 
                      controlPointY2,  
                      endingPointX, 
                      endingPointY);

Related Topics