How to use Canvas Quadratic Curve in HTML5
In this article I am going to explain about Canvas Quadratic Curve in Html5.
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

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