HTML5 Recipes: Strokes and Fills

So far in the Canvas recipes, we have used the used the default stroke and fill colors. We saw how fillRect() and strokeRect() methods used the default stroke/fill color i.e. black. In this recipe, we shall utilize attributes of the Canvas context object to specify the stroke and fill colors. We shall also take a look at the lineWidth attribute that allows us to specify a stroke width.

Note that by default, the stroke color and fill color is black. If you need to specify the color for the stroke and fill, you will need to specify that via the strokeStyle and fillStyle attributes of the canvas context object. The values can be a color specified. Example values of the attribute are “black”,”red”, “#FF0000”, “rgb(255,0,0)”, etc.

Let us first look at the code to draw a Rectangle and fill it with Red color:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Rectangle</title>
<script>
function draw_rectangle() {

 var canvasObj = document.getElementById("mycanvas");
 var canvasCtx = canvasObj.getContext("2d");

 //specify the fillStyle
 canvasCtx.fillStyle = "red";

 canvasCtx.fillRect(0, 0,200,200);
}

function clear_canvas() {
	var canvasObj = document.getElementById("mycanvas");
	var canvasCtx = canvasObj.getContext("2d");
	canvasCtx.clearRect(0,0,200,200);
}
</script>
</head>
<body>
    <div id="instructions">
     <a href="#" onclick="draw_rectangle();return false">Click to draw</a>
     <a href="#" onclick="clear_canvas();return false">Click to clear</a>
    </div>
 <div id="drawingsurface">
  <canvas id="mycanvas" width="200" height="200"/>
 </div>
</body>
</html>

The code mirrors the recipe that we have used previously, except for a small change. Before we invoke the fillRect() method, we are specifying the fillStyle as “red’. See it in action over here.

Similarly, you can control the stroke line width and color of the canvas context, by providing values for the lineWidth and strokeStyle attributes respectively. Shown below is code to draw a rectangle whose border is blue in color and has a width of 10.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Rectangle</title>
<script>
function draw_rectangle() {

 var canvasObj = document.getElementById("mycanvas");
 var canvasCtx = canvasObj.getContext("2d");

 //specify the stroke style
 canvasCtx.strokeStyle = "blue";

 //specify the stroke line width
 canvasCtx.lineWidth = "10";
 canvasCtx.strokeRect(0, 0,200,200);
}

function clear_canvas() {
	var canvasObj = document.getElementById("mycanvas");
	var canvasCtx = canvasObj.getContext("2d");
	canvasCtx.clearRect(0,0,200,200);
}
</script>
</head>
<body>
    <div id="instructions">
     <a href="#" onclick="draw_rectangle();return false">Click to draw</a>
     <a href="#" onclick="clear_canvas();return false">Click to clear</a>
    </div>
 <div id="drawingsurface">
  <canvas id="mycanvas" width="200" height="200"/>
 </div>
</body>
</html>

See it in action here

Since the lineWidth and strokeStyle are attributes of the canvas context at any given point of time, it applies even to other operations like drawing a line, etc. Here is an example of a different stroke and line width used to draw a simple line


HTML5 Canvas Recipes

  1. Getting Started with Canvas
  2. Rectangles
  3. Strokes and Fills
  4. Drawing Text
  5. Paths
  6. Circles and Arcs
  7. Images
  8. Graphs With Canvas

Back to HTML5 Series

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s