Home » HTML5 Canvas Tutorial » Canvas Graphics Attributes

Canvas Graphics Attributes

Canvas Graphics Attributes

The canvas API has a large number of graphics attributes that we use to specify:

  • the color to be used by the fill() method
  • the color to be used by the stroke() method
  • the width of the lines to be drawn by the stroke() method.

These attributes are not parameters of the fill() and stroke() methods, but are part of the general graphics state of the canvas.

This results in separation of the graphics state from drawing commands and is similar to the separation of presentation and content achieved by cascading stylesheets (CSS) and HTML in HTML documents.

Graphics attributes of the Canvas API:

  • fillStyle – specifies the color, gradient, or pattern for fills.
  • font – specifies the font for text-drawing commands.
  • globalAlpha – specifies the transparency to be added to all pixels drawn on the canvas.
  • globalCompositeOperation – specifies how to combine pixel colors on canvas.
  • lineCap – specifies how the ends of lines are rendered.
  • lineJoin – specifies vertices or joints are rendered.
  • lineWidth – specifies the width of stroked lines.
  • miterLimit – sets the maximum length of acute mitered vertices
  • textAlign – sets the horizontal alignment of text on canvas.
  • textBaseline – sets the vertical alignment of text.
  • shadowBlur – specifies how crisp or blurry shadows are.
  • shadowColor – the colour of drop shadows.
  • shadowOffsetX – specifies the horizontal offset of shadows.
  • shadowOffsetY – specifies the vertical offset of shadows
  • strokeStyle – specifies the color or gradient for lines.

fillStyle

Lets start by drawing a rectangle in canvas:

script.js

var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

context.strokeStyle = '#230387';
context.lineWidth = 4;
context.rect(20,30, 300, 200);
context.stroke();

Output



Canvas rectangle



By default, our rectangle has no colour fill. Now lets add a colour fill. Filling the rectangle is a matter of first setting the fillStyle attribute and then calling the fill() method as follows:

script.js

var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

context.strokeStyle = '#230387';
context.lineWidth = 4;
context.rect(20,30, 300, 200);

//set the fillStyle attribute with the colour hex value
context.fillStyle = '#00ff00';

//call the fill() method
context.fill();

context.stroke();

Output



Canvas rectangle



In the above example we set the fillStyle attribute using the hex value of the colour green. You can achieve the same result using the rgb colour value as follows:

context.fillStyle = "rgb(0, 255, 0)";

Whereas the rect(x,y,w,h) method draws an unfilled rectangle, the fillRect(x,y,w,h) method draws a filled rectangle. You can easily draw a filled rectangle as follows:


var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

context.fillRect(20,30, 300, 200);

Canvas rect



As you can see from the example above, if you specify the fill colour, the fillRect(x,y,w,h) method fills it with the default colour black. The fillStyle attribute changes the fill colour as follows:


var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

context.fillStyle = '#23ff03';
context.fillRect(20,30, 300, 200);

Canvas fillrect



Examples of how to use other attributes

font, textAlign and textBaseline

font, textAlign and textBaseline attributes can be set as shown in the code below:


var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

context.font = "40pt Calibri";

//fillStyle can also be defined with color name
context.fillStyle = "blue";

// align text horizontally center
context.textAlign = "center";

 // align text vertically center
context.textBaseline = "middle";

context.fillText("sytech.co.zw", canvas.width/2, canvas.height/2);

Canvas text



shadowColor and shadowBlur

var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

context.font = "40pt Calibri";

//fillStyle can also be defined with color name
context.fillStyle = "blue";

// align text horizontally center
context.textAlign = "center";

 // align text vertically center
context.textBaseline = "middle";

context.shadowColor = "black";
context.shadowBlur = 10;

context.fillText("sytech.co.zw", canvas.width/2, canvas.height/2);

Canvas text shadow



shadowOffsetX and shadowOffsetY

var canvas = document.getElementById("canvas1");
var context = canvas.getContext('2d');

context.font = "40pt Calibri";

//fillStyle can also be defined with color name
context.fillStyle = "blue";

// align text horizontally center
context.textAlign = "center";

 // align text vertically center
context.textBaseline = "middle";

context.shadowColor = "black";
context.shadowBlur = 10;

context.shadowOffsetX = 5;
context.shadowOffsetY = 5;

context.fillText("sytech.co.zw", canvas.width/2, canvas.height/2);

Shadow offset