How to draw Bezier Curve and Quadratic Curve using html5 canvas

The basic and the toprated topics of HTML5 Canvas like html5 canvas image annotation, html5 canvas drag and drop, html5 canvas layers and all the topics of html5 canvas javascript framework covered by theiteducation in both forms if you want to learn the basic and fundamentals of html5 canvas through video tutorial then you can visit our youtube channel. Moreover a playlist of all video tutorials is embeded in the last. However Let start our tutorial how to draw Bezier Curve and Quadratic Curve using html5 canvas.

Bezier Curve Tutorial

In this articlle we will learn to draw Bezier Curve and Quadratic Curve.

Similarly There are two types of curves.

  • cubic bezier Curve
  • quadratic bezier Curve
  • —————————————-
html5 canvas Bezier Curve Tutorial
BezierCurveTtpe

cubic bezier Curve

This is normal cubic Bezier curve.It uses two points which are used as controll point.
The code for drawing a cubic Bezier curve is given


context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

This method bezierCurveTo() has six argument.
1: cp1x
Now This is xCoordinate of first controll point.
2: cp2y
Similarly This is the yCoordinate of controll point 1.
3: cp2x
This is the xCoordinate of controll point 2.
4: cp2y
This is yCoordinate of controll point 2
5 x
xCoordinate of end point.
6 y
yCoordinate of end point

How To Draw Bezier Curve 

The code for drawing a cubic bezier Curve from point (150,0) to point(150,300) with first controll point(0,125) and second controll point(300,175) will be as following.


context.moveTo(150,0);
context.bezierCurveTo(0,125,300,175,150,300);

quadratic Bezier Curve

In this type of Bezier Curve , there are one controll point.
The method for drawing curve is quadraticCurveTo().
The code for drawing a quadratic Bezier Curve is


context.quadraticCurveTo(cpx,cpy,x,y);


This method takes four argument.

1 cpx

Similarly This is xCoordinates of controll point 1

2 cpy

This is yCoordinates of controll point .

x

However This is xCoordinates of ending point of curve.

y

This is yCoordinate of ending point of curve.
========================================

How To draw Quadratic Bezier Curve using html5 Canvas

The code for drawing a quadratic Bezier Curve from(0,0)to (300,0) with controll point(150,150) will be:


context.moveTo(0,0);
context.quadraticCurveTo(150,150,300,0);

Drawing Bezier Curve and Quadratic Bezier Curve using html5 canvas:code example

———————————————–



<!DOCTYPE html>
<html>
    <head>
        <title>Drawing </title>
    </head>
    <body>
        <canvas id ="myCanvas" width ="600" height ="400"
            style="border: 1px solid blue;">
        </canvas>
        <script>
            var  canvas = document.getElementById("myCanvas");
            var context =canvas.getContext('2d');
            //style and drawing for cubic quad curve
                        context.beginPath();
            context.lineWidth =5;
            context.strokeStyle ='#0000ff';
            context.moveTo(150,0);
            context.bezierCurveTo(0,125,300,175,150,300);
            context.stroke();
            // style and drawing of Bazier Quad Curve
            ontext.beginPath();
            context.lineWidth =5;
            context.strokeStyle ='#00ffff';
            context.moveTo(0,0);
            context.quadraticCurveTo(150,150,300,0);
            
            context.stroke();
            



            
            
        </script>
    </body>
</html>

———————————————————————–

======================================================

Drawing Bezier Curve and Quadratic Bezier Curve live code demo

[codepen_embed height=300 theme_id=1 slug_hash=’XJaWwL’ user=’aslamwaqar’ default_tab=’html’ animations=’run’]

[/codepen_embed]

Author: Habibullah Qamar

Its me Habib Ullah Qamar working as a Lecturer (Computer Sciences) in Pakistan. I have an MS(M.Phil) degree in computer sciences with specialization in software engineering from Virtual University of Pakistan Lahore. I have an experience of more than 15 years in the filed of Computer Science as a teacher. Blog Writing is my passion. I have many blogs, This one is special made with the aim of providing 100% Free online coaching and training to the students of under-graduate and postgraduate classes. Most of the students enrolled in computer sciences, information technology, software engineering and related disciplines find it difficult to understand core concepts of programming and office automation. They find difficult in understanding and solving their assignments.

Leave a Reply

Your email address will not be published. Required fields are marked *