HTML5 - How to draw a rectangle
Article Metadata
This article explains how to create a rectangle using the graphics capabilities of HTML5
Introduction
Drawing a rectangle with HTML5 is easy. What you need, is to instantiate the graphics context and then use fillStyle() and fillRect() methods.
To the FillStyle we will offer a hexadecimal color code as parameter. This color will then be used to draw the rectangle.
For FillRect, which will actually do what we want to see on the screen, a rectangle that is, we will be giving two points in the x and y coordinate system. The first point (x,y) will be where the drawing starts and the second point (x,y) will define where the drawing will end.
Prerequisites
HTML5 supported browser.
Example code
Change the values to see the difference. This code will create a 800x600 black box on screen.
<html>
<canvas id="myCanvas" width="800" height="600">
Your Browser does not support the HTML5 CANVAS Property. //displays on a non-HTML5 supporting browser.
</canvas>
<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
var myContext = myCanvas.getContext("2d");
myContext.fillStyle="#00000";
myContext.fillRect(0,0,800,600);
</script>
</html>
(no comments yet)