Canvas- Make Beautiful Shapes by Rotation and Transformation

Written by @m_k_amin 13 June 2013

HTM5 Canvas has two efficient and simple tools which help to draw more beautiful shapes harder to draw them directly. They are HTML5 Transformation for moving the context axis and HTML5 Rotation for rotating the context. Below we have made a beautiful shape just by rotating and redrawing a simple polygon with four sides (show at the right). Enjoy!

Code Snippet:

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

	ctx.translate (110, 120)

for (i=0; i<=360; i+=15){
	ctx.rotate(i*deg)
    ctx.beginPath()
    ctx.moveTo(0, 0)
    ctx.lineTo(85, 0)
    ctx.lineTo(70, 80)
    ctx.lineTo(0, 75)
    ctx.shadowBlur = 5
	ctx.closePath()
	ctx.shadowColor= "rgba(220,210,220,.4)"
	ctx.shadowOffsetX = ctx.shadowOffsetY = 5
    ctx.strokeStyle= "rgba(190,20,210,0.8)"
    ctx.lineWidth= 2
    ctx.stroke()
}

	ctx.translate (-235, -40)

    ctx.beginPath()
    ctx.moveTo(0, 0)
    ctx.lineTo(85, 0)
    ctx.lineTo(70, 80)
    ctx.lineTo(0, 75)
    ctx.shadowBlur = 5
	ctx.closePath()
	ctx.shadowColor= "rgba(220,210,220,.4)"
	ctx.shadowOffsetX = ctx.shadowOffsetY = 5
    ctx.strokeStyle= "rgba(100,20,210,0.8)"
    ctx.lineWidth= 2
    ctx.stroke()
</script>
<div style="text-align: left"><br><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='https://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.

Comments

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

0 / 300