Canvas- Curved Lines and Shapes (Circle, Arc, Bezier, Ellipse and etc.)

Written by @m_k_amin 13 June 2013

Graphical objects are not all made up of straight lines. HTML5 Canvas has different functions for drawing curved lines and shapes. You can draw Ellipses and Bezier shapes with one or two control points. It is also possible to draw circles or just an arc within two points. The following codes have different usages of HTML5 Canvas curved lines and shapes; for example we have used these features for creating curved corners of a rectangle.

Code Snippet:

                                                
                                                <!-- this script is provided by www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<br>
<canvas id="myCanvas" width="400" height="230"></canvas>
<script>
    var cnv = document.getElementById('myCanvas')
    var ctx = cnv.getContext('2d')
    var deg = Math.PI/180

	ctx.beginPath()
	ctx.arc(60, 70, 50, 0, 130*deg, false)
    ctx.lineWidth= 2
    ctx.fillStyle= "lightblue"
    ctx.strokeStyle= "magenta"
    ctx.fill()
    ctx.stroke()
   
 	ctx.beginPath()
 	ctx.moveTo(10, 70)
	ctx.bezierCurveTo (60, 70, 60, 0, 110, 70)
    ctx.lineWidth= 2
    ctx.fillStyle= "pink"
    ctx.strokeStyle= "Brown"
    ctx.fill()
    ctx.stroke()

	ctx.beginPath()
	ctx.moveTo(200, 20)
	ctx.lineTo(250, 20)
	ctx.quadraticCurveTo(280, 20, 280, 40)
	ctx.lineTo(280, 180)
	ctx.quadraticCurveTo(260, 180, 250, 200)
	ctx.lineTo(200, 200)
	ctx.quadraticCurveTo(190, 180, 170, 180)
	ctx.lineTo(170, 40)
	ctx.quadraticCurveTo(170, 20, 200, 20)
    ctx.lineWidth= 2
    ctx.fillStyle= "lightgreen"
    ctx.strokeStyle= "darkgreen"
    ctx.fill()
    ctx.stroke()
</script>
<div style="text-align: left"><font face="Tahoma"><br><a target="_blank" href="http://www.html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div><a target='_blank' href='www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>                                                
                                            

Example:


About @m_k_amin

This user is pending a biography.

M

Comments


Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: FOTPU
advertisement 2