Drawing Curves in HTML5

HTML5 allows you to draw curves on HTML5 canvas. They way to do it is with the help of paths. We use different functions to create curves with a quadratic curve being one of them. 

Let us start with the example 

    <script>

                function drawingExample(context) {

                    context.save();

                    context.translate(-1,35);

                    context.beginPath();

                    context.moveTo(0,0);

                    context.quadraticCurveTo(100,-20,200,-100);     //Curve one

                    context.quadraticCurveTo(200,-40,400,-50); //curve      two

                    context.strokeStyle="#442299";

                    context.lineWidth=10;

                    context.stroke();

                    context.restore();

            }

    </script>

There is a concept of the control point in HTML5 curves and we specify this point at first position on our canvas. This control point is the point around which our curve will bend. It is not part of the curve but is positioned right outside where line makes a curve. This control point allows you to adjust your curve one way or another and can be set or reset to your desired position. 

See picture for visual representation of this control point below. 

 Some description

There are other commands for curves in HTML5: bezierCurveTo, arctTo and other arc functions. They are more complex in nature and take angels as attributes and parameters.

Featured pages

Overview

Learn about HTML5 architecture, design principles and patterns on HTML5 Overview Tutorial. Become …

Tags

Learn about HTML5 tags and discover a new list of HTML5 tags. Find out about HTML5 tags support by…

Welcome

 Learn HTML5 development techniques, tips and tricks on our website. Find out what is required…

Date Time Picker

HTML5 forms use date and time controls regularly. HTML5 date and time controls are used by booking …