Html Codes: Canvas- Draw Polygons with Shadow Effect

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 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>

If you don't know how to use this code or need more information Click here!


	You can leave comments once you sign in/up.

HTML5 Best Codes

Html Codes: Canvas- Draw Polygons with Shadow Effect

You can leave comments once you sign in/up.

Review

Links