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
Because the rectangles are so common shapes that are needed a lot in 2D graphics, HTML5 Canvas has special functions for it. So you can easily draw and fill a rectangle just by defining a point for its up-left corner and then specifying its width and height. It is also easy for clear part of the context in a rectangular shape. Use the following example to figure out how all of these things can be done about Rectangles by using HTML5 Canvas element and JavaScript.
<!-- 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="400px" height="230px"></canvas>
<script>
var cnv = document.getElementById('myCanvas')
var ctx = cnv.getContext('2d')
ctx.beginPath()
ctx.fillStyle= "lightblue"
ctx.fillRect(20, 20, 80, 120)
ctx.beginPath()
ctx.lineWidth= 2
ctx.strokeRect(150, 50, 130, 50)
ctx.strokeStyle= "Brown"
ctx.stroke()
ctx.beginPath()
ctx.fillStyle= "rgba(120, 30, 10, 0.3)"
ctx.fillRect(10, 10, 300, 150)
ctx.beginPath()
ctx.clearRect(80, 90, 90, 20)
</script>
<div style="text-align: left"><font face="Tahoma"><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!