• 1955

Canvas Quadratic Curve in Html5

Canvas Quadratic Curve In Html5 is an Canvas tool. That mainly use for define Context point, Control point and ending point of an element. For its we use QuadraticCurveTo() Method within Style tag in Html document.

Syntax

<script>

    cntx.quadraticCurveTo(controlX, controlY, endX, endY);

</script>

 

Example

 

<html>

  <head>

    <style>

      body {

        margin: 0px;

        padding: 0px;

      }

    </style>

    <script>

        window.onload = function () {

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

            var cntx = canvas.getcntx("2d");

 

            cntx.beginPath();

            cntx.moveTo(188, 150);

            cntx.quadraticCurveTo(288, 0, 388, 150);

            cntx.lineWidth = 10;

            // line color

            cntx.strokeStyle = "black";

            cntx.stroke();

        };

 

    </script>

  </head>

  <body>

    <canvas id="mycanvas" width="500" height="250"></canvas>

  </body>

</html>

 

Output


cnv2.jpg

Further Readings

You may also want to read these related articles: here

Ask Your Question 
 
Got a programming related question? You may want to post your question here
 

© 2019 DotNetHeaven. All rights reserved.