- Trending Categories
- Data Structure
- Operating System
- C Programming
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to draw a Bezier Curve with HTML5 Canvas?
The HTML5 <canvas> tag is used to draw graphics, animations, etc. using scripting. It is a new tag introduced in HTML5. The canvas element has a DOM method called getContext, which obtains rendering context and its drawing functions. This function takes one parameter, the type of context 2d.
To draw a Bezier curve with HTML5 canvas, use the bezierCurveTo() method. The method adds the given point to the current path, connected to the previous one by a cubic Bezier curve with the given control points.
You can try to run the following code to learn how to draw a Bezier curve on HTML5 Canvas. The x and y parameters in bezierCurveTo() method are the coordinates of the endpoint. cp1x and cp1y are the coordinates of the first control point, and cp2x and cp2y are the coordinates of the second control point.
<!DOCTYPE html> <html> <head> <title>HTML5 Canvas Tag</title> </head> <body> <canvas id = "newCanvas" width = "500" height = "300" style = "border:1px solid #000000;"></canvas> <script> var c = document.getElementById('newCanvas'); var ctx = c.getContext('2d'); ctx.beginPath(); ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25); ctx.bezierCurveTo(85,25,75,37,75,40); ctx.fill(); </script> </body> </html>
- Draw Bezier Curve with HTML5 Canvas
- HTML Canvas to draw Bezier Curve
- How to draw a quadratic curve on HTML5 Canvas?
- Draw a shadow with HTML5 Canvas
- How to draw a rectangle on HTML5 Canvas?
- How to draw lines using HTML5 Canvas?
- How to draw a star by using canvas HTML5?
- How to draw an oval in HTML5 canvas?
- How to draw large font on HTML5 Canvas?
- Define a Cubic Bezier curve using CSS
- Draw a circle filled with random color squares on HTML5 canvas
- How to draw grid using HTML5 and canvas or SVG?
- How to draw an SVG file on an HTML5 canvas?
- Detection on clicking bezier path shape with HTML5
- How to use images with HTML5 canvas?