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 8 June 2013
Polygons are base of other structures in 2D graphics. HTML5 canvas element with JavaScript let you create these objects easily and different effects can be added to them. Below, we have drawn a colored triangle inside a square, both with shadow effect. Shadows can also be managed in HTML5, for example their distance from the shapes and color can be set. 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-->
<br>
<canvas id="myCanvas" width="400" height="150"></canvas>
<script>
var cnv = document.getElementById('myCanvas')
var ctx = cnv.getContext('2d')
ctx.beginPath()
ctx.moveTo(50, 10)
ctx.lineTo(250, 10)
ctx.lineTo(250, 100)
ctx.lineTo(50, 100)
ctx.closePath()
ctx.shadowBlur = 5
ctx.shadowColor= "rgba(100,100,100,.4)"
ctx.shadowOffsetX = ctx.shadowOffsetY = 5
ctx.strokeStyle= "blue"
ctx.lineWidth= 8
ctx.stroke()
ctx.beginPath()
ctx.moveTo(150, 30)
ctx.lineTo(100, 70)
ctx.lineTo(200, 70)
ctx.shadowBlur = 5
ctx.closePath()
ctx.shadowColor= "rgba(100,100,100,.4)"
ctx.shadowOffsetX = ctx.shadowOffsetY = 5
ctx.fillStyle= "pink"
ctx.lineWidth= 8
ctx.stroke()
ctx.fill()
</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!