It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Please check your email for instructions to activate your account.
Written by 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!
<!-- 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>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!