HTML and CSS Reference
In-Depth Information
Though it's nothing to write home about from a graphical perspective, the page (when viewed in a
compatible browser) shows a large black rectangle offset in the canvas, as shown in Figure 28-3. I
used a simple CSS rule to outline the canvas area with a dashed line so you could see how the rect-
angle is relatively placed.
FiGure 28-3
By default, the rectangle's fill color is black. The fill style is controlled by the appropriately named
JavaScript function
fillStyle()
. Your canvas elements can be filled with a solid color, a gradient,
or a pattern. The stroke style can also be user defined with the — you guessed it —
strokeStyle()
function.
If you'd rather have an unfilled rectangle, use the
strokeRect()
function instead of
fillRect()
.
Here's a complete example of the JavaScript code, with the
strokeRect()
function in bold:
<script type=”text/javascript”>
function doCanvas() {
var my_canvas = document.getElementById(“myCanvas”);
var myCanvas_context = my_canvas.getContext(“2d”);
myCanvas_context.strokeRect(50, 50, 150, 150);
}
</script>
The unfilled rectangle, as rendered in Safari, is shown in Figure 28-4.
To draw both the stroke and the filled rectangle, simply include both code lines.
