- HTML5 Canvas Cookbook
- Eric Rowell
- 536字
- 2021-08-27 12:08:06
Drawing a rectangle
In this recipe, we'll learn how to draw the only built-in shape provided by the HTML5 canvas API, a rectangle. As unexciting as a rectangle might seem, many applications use them in one way or another, so you might as well get acquainted.
How to do it...
Follow these steps to draw a simple rectangle centered on the canvas:
- Define a 2D canvas context:
window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); - Draw a rectangle using the
rect()method, set the color fill with thefillStyleproperty, and then fill the shape with thefill()method:context.rect(canvas.width / 2 - 100, canvas.height / 2 - 50, 200, 100); context.fillStyle = "#8ED6FF"; context.fill(); context.lineWidth = 5; context.strokeStyle = "black"; context.stroke(); }; - Embed the canvas tag inside the body of the HTML document:
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;"> </canvas>
How it works...
As you can see from the preceding code, we can draw a simple rectangle by using the rect() method:
context.rect(x,y,width,height);
The rect() method draws a rectangle at the position x,y, and defines its size with width and height. Another key thing to pay attention to in this recipe is the usage of fillStyle and fill(). Similar to strokeStyle and stroke(), we can assign a fill color using the fillStyle method and fill the shape using fill().
There's more...
In addition to the rect() method, there are two additional methods that we can use to draw a rectangle and also apply styling with one line of code, the fillRect() method and the strokeRect() method.
If we intend to fill a rectangle after drawing it with rect(), we might consider both drawing the rectangle and filling it with a single method using fillRect():
context.fillRect(x,y,width,height);
The fillRect() method is equivalent to using the rect() method followed by fill(). When using this method, you'll need to define the fill style prior to calling it.
In addition to the fillRect() method, we can draw a rectangle and stroke it with a single method using the strokeRect() method:
context.strokeRect(x,y,width,height);
The strokeRect() method is equivalent to using the rect() method followed by stroke(). Similar to fillRect(), you'll need to define the stroke style prior to calling this method.
Tip
Unfortunately, the HTML5 canvas API does not support a method that both fills and strokes a rectangle. Personally, I like to use the rect() method and apply stroke styles and fills as needed using stroke() and fill() because it's more consistent with custom shape drawing. However, if you're wanting to apply both a stroke and fill to a rectangle while using one of these short-hand methods, it's good practice to use fillRect() followed by stroke(). If you were to use strokeRect() followed by fill(), you would overlay the stroke style by the fill, halving the stroke line width.