Did you find this useful?
Socialize it today.


HTML5 Canvas: Rectangles

Tuesday, October 23, 2012

The Canvas element is a new addition to HTML. The previous article provided a brief introduction to the canvas element. In this article, we will start by going over how to create some simple rectangles in the canvas element. Learning how to draw rectangles is a great place to start. We will take a look at a few ways to draw rectangles. Once you begin to learn how to use all of the methods and properties available, you will quickly notice how easy it will be to incorporate drawings into your web pages. For example, up to now, it has been a bit challenging to even incorporate bar graphs. That is no longer the case thanks to the canvas element.

Rect() Method

While you can draw a rectangle by constructing the same with four connecting lines, we can use the rect() method instead. An HTML5 Canvas rectangle is positioned with x and y parameters, and is sized with width and height parameters. The rectangle is positioned about its top left corner.

Syntax

context.rect(x,y,width,height);

Example

<canvas id="myCanvas" width="400" height="200" style="border:1px solid #AAAAAA;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.rect(100, 50, 200, 100);
    context.stroke();
</script>

Your browser does not support the HTML5 canvas tag.

We can take this same example and use some additional methods to help us apply some additional styling.

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.fillStyle = "#FFAA00";
    context.rect(100, 50, 200, 100);
    context.fill();
    context.lineWidth = 3;
    context.strokeStyle = '#232323';
    context.stroke();
</script>

Your browser does not support the HTML5 canvas tag.

Filling the Rectangle with a Gradient

A solid fill color for our rectangle is good, but a gradient makes our rectangle more interesting. To create a gradient, we can use the createLinearGradient or createRadialGradient methods.

CreateLinearGradient

context.createLinearGradient(x1,y1,x2,y2);

x1The x-coordinate of the starting point of the gradient
y1The y-coordinate of the starting point of the gradient
x2The x-coordinate of the ending point of the gradient
y2The y-coordinate of the ending point of the gradient

Use the addColorStop() method to specify different colors, and where to position the colors in the gradient object. You can call the addColorStop() method multiple times to change a gradient. Use values between 0.0 and 1.0 to represents the position between start and end in a gradient.

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var gradient = context.createLinearGradient(0, 50, 0, 150);
    gradient.addColorStop(0, "#FFAA00");
    gradient.addColorStop(1, "#FFFF00");
    context.fillStyle = gradient;
    context.rect(100, 50, 200, 100);
    context.fill();
    context.lineWidth = 3;
    context.strokeStyle = '#232323';
    context.stroke();
</script>

Your browser does not support the HTML5 canvas tag.

CreateRadialGradient

context.createRadialGradient(x1,y1,r1,x2,y2,r2);

x1The x-coordinate of the starting circle of the gradient
y1The y-coordinate of the starting circle of the gradient
r1The radius of the starting circle
x2The x-coordinate of the ending circle of the gradient
y2The y-coordinate of the ending circle of the gradient
r2The radius of the ending circle

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var gradient = context.createRadialGradient(200, 100, 50, 200, 100, 100);
    gradient.addColorStop(0, "#FFAA00");
    gradient.addColorStop(1, "#FFFF00");
    context.fillStyle = gradient;
    context.rect(100, 50, 200, 100);
    context.fill();
    context.lineWidth = 3;
    context.strokeStyle = '#232323';
    context.stroke();
</script>

Your browser does not support the HTML5 canvas tag.

FillRect() Method

As an alternate to the rect() method, you can also use the fillRect() method to draw and fill a rectangle.

context.fillRect(x,y,width,height);

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.fillStyle = "#FFAA00";
    context.rect(100, 50, 200, 100);
    context.fillRect();
</script>

Your browser does not support the HTML5 canvas tag.

clearRect() Method

The clearRect() method can be used to clear the specified pixels from within the rectangle.

context.fillRect(x,y,width,height);

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.fillStyle = "#FFAA00";
    context.rect(100, 50, 200, 100);
    context.fillRect();
    context.clearRect(20, 20, 100, 50);
</script>

Your browser does not support the HTML5 canvas tag.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

The Definitive Guide to HTML5 HTML5: The Missing Manual HTML CSS and JavaScript