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