Next »
1036/1956
« Previous

Draw Quadratic Bezier Curves in JavaScript

Description

The following code shows how to draw Quadratic Bezier Curves.

Example


<!--  w  w w  .jav a 2s .  c  o  m-->
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.lineWidth = 10;
context.strokeStyle = "black"; // line color
context.moveTo(100, canvas.height - 50);
context.quadraticCurveTo(canvas.width / 2,
-50,
canvas.width - 100,
canvas.height - 50);
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>
</body>
</html>

Click to view the demo

The code above generates the following result.

Draw Quadratic Bezier Curves in JavaScript
Next »
« Previous