getContext() method

In order to draw graphics on the canvas, we need to use javascript getContext() method. This returns an object that provides methods and properties for drawing on the canvas.

getContext() method takes one parameter, the type of context. There can be "2d" or "webgl" contexts. This presentation focuses on the "2d" context.

<canvas id="some-canvas" width="150" height="150">Fallback content</canvas>
<script type="text/javascript">
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
</script>

ctx now has access to all the drawing methods.

Checking for browser support

The fallback content is displayed in browsers which do not support <canvas>. Scripts can also check for support programatically by simply testing for the presence of the getContext() method.

<canvas id="some-canvas" width="150" height="150">Fallback content</canvas>
<script type="text/javascript">
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}
</script>

Browser support

Canvas was first introduced by Apple for the Mac OS X Dashboard and later implemented in Safari and Google Chrome.

The canvas grid

1 unit in the grid corresponds to 1 pixel on the canvas. The top left corner corresponds to coordinate (0,0)). All elements are placed relative to this origin.

Rectangles, circles, lines and curvess

<canvas> only supports one primitive shape: rectangles. All other shapes must be created by combining one or more paths. We can use several path drawing functions which make it possible to compose very complex shapes. We can have linear paths, arcs and bezier curve paths.

Rectangles

There are three functions that draw rectangles on the canvas:

Each of these three functions takes the same parameters.x and y specify the position on the canvas (relative to the origin) of the top-left corner of the rectangle.width and height provide the rectangle's size.

All 3 functions draw a rectangle immediately on the canvas.

Example

						
<canvas id="canvas" width="150" height="150"></canvas>
<script type="text/javascript">
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);
  }
}
</script>            				
						
						

The fillRect() function draws a large black square 100 pixels on each side. The clearRect() function then erases a 60x60 pixel square from the center, and then strokeRect() is called to create a rectangular outline 50x50 pixels within the cleared square.

Circles

To draw arcs or circles, we use the arc() method.

x and y are the coordinates of the center of the circle on which the arc should be drawn.radius is self-explanatory. The startAngle and endAngle parameters define the start and end points of the arc in radians, along the curve of the circle. These are measured from the x axis. The anticlockwise parameter is a Boolean value which, when true, draws the arc anticlockwise; otherwise, the arc is drawn clockwise.

Angles in the arcfunction are measured in radians, not degrees. To convert degrees to radians you can use the following JavaScript expression: radians = (Math.PI/180)*degrees.

Example

						
<canvas id="canvas" width="150" height="150"></canvas>
<script type="text/javascript">
function draw() {
	var canvas = document.getElementById('canvas');
	if (canvas.getContext) {
		var ctx = canvas.getContext('2d');

		ctx.beginPath();
		ctx.arc(75,75,50,0,Math.PI*2,true);
		ctx.stroke(); // if we want a filled circle use ctx.fill()
	}
}
</script>      
						
						

The first circle uses stroke(). The second one uses fill().

Drawing lines

We can draw simple linear lines, bezier curves and other complex forms using path functions.

Before we start, there are a few methods used in drawing and manipulating lines, as well as rectangles and arcs. These methods allow drawing multiple lines and shapes in the same canvas, resulting in complex images.

beginPath()

First thing when we start drawing shapes, we have to call the beginPath(). Internally, paths are stored as a list of sub-paths (lines, arcs, etc) which together form a shape. Every time this method is called, the list is reset and we can start drawing new shapes.

							
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
	// draw shapes methods
	}
}
							
						

closePath() VS fill()

closePath() is optional and tries to close the shape by drawing a straight line from the current point to the start. If the shape has already been closed or there's only one point in the list, this function does nothing.

Alternatively we can use fill(). This function automatically closes the path and also fills in the shape with color or patterns. When you call fill(), any open shapes are closed automatically, so you don't have to call closePath().

						
function draw() {
	var canvas = document.getElementById('canvas');
	if (canvas.getContext){
		var ctx = canvas.getContext('2d');

		ctx.beginPath();
		// draw shapes methods
		ctx.closePath();
	}
}						
						
						

stroke()

What if we don't want a solid shape? We can use stroke() to draw an empty shape.stroke() draws the shape by stroking its outline.

						
function draw() {
	var canvas = document.getElementById('canvas');
	if (canvas.getContext){
		var ctx = canvas.getContext('2d');

		ctx.beginPath();
		ctx.arc(75,75,50,0,Math.PI*2,true); // Draw a circle
		ctx.stroke();
	}
}
						
						

If we don't use fill() nor stroke(), the path or shape will be completely transparent.

moveTo()

Once we've drawn a line or shape and we want to add another one to the same canvas, we have to use moveTo() to set a different starting point. If we don't use moveTo, the new line or shape will be considered part of the initial shape.

moveTo(x, y) Moves the starting point for a path to the coordinates specified by x and y.

Example

						
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true); // Draw a circle
    ctx.moveTo(110,75);
    ctx.arc(75,75,35,0,Math.PI,false);   // Draw 2nd circle
    ctx.moveTo(65,65);
    ctx.arc(60,65,5,0,Math.PI*2,true);  // Draw 3rd circle
    ctx.moveTo(95,65);
    ctx.arc(90,65,5,0,Math.PI*2,true);  // Draw 4th circle
    ctx.stroke();
  }
}
						
						

Bezier curves

The difference between a quadratic Bézier curve and a cubic Bézier curve is that the quadratic curve has just one control point while a cubic Bézier curve uses two control points.

The x and y parameters in both of these methods are the coordinates of the end point.

Quadratic curve | Cubic curve

Draw a heart

						
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    // Quadratric curves example
    ctx.beginPath();
    ctx.moveTo(75,40);
    ctx.bezierCurveTo(75,37,70,25,50,25);
    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
    ctx.bezierCurveTo(20,80,40,102,75,120);
    ctx.bezierCurveTo(110,102,130,80,130,62.5);
    ctx.bezierCurveTo(130,62.5,130,25,100,25);
    ctx.bezierCurveTo(85,25,75,37,75,40);
    ctx.fill();
  }
}
						
						

Colors and gradients

Colors

Possible color values: "orange", "#FFA500", "rgb(255,165,0)", "rgba(255,165,0,1)"

Red heart

						
function drawRedHeart() {
  var canvas = document.getElementById('red-heart');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(75,40);
    ctx.bezierCurveTo(75,37,70,25,50,25);
    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
    ctx.bezierCurveTo(20,80,40,102,75,120);
    ctx.bezierCurveTo(110,102,130,80,130,62.5);
    ctx.bezierCurveTo(130,62.5,130,25,100,25);
    ctx.bezierCurveTo(85,25,75,37,75,40);
	ctx.fillStyle = "red";
	ctx.strokeStyle = "#000000";
    ctx.fill();
	ctx.stroke();
  }
}
						
						

Transparency

						
function drawRedHeart() {
  var canvas = document.getElementById('red-heart');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
	ctx.fillStyle = "blue";
	ctx.fillRect(50,50,100,50);
	
    ctx.beginPath();
    ctx.moveTo(75,40);
    ctx.bezierCurveTo(75,37,70,25,50,25);
    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
    ctx.bezierCurveTo(20,80,40,102,75,120);
    ctx.bezierCurveTo(110,102,130,80,130,62.5);
    ctx.bezierCurveTo(130,62.5,130,25,100,25);
    ctx.bezierCurveTo(85,25,75,37,75,40);
	ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
	ctx.strokeStyle = "#000000";
    ctx.fill();
	ctx.stroke();
  }
}
						
						

Line styles

Gradients

Example

						

function drawGradientHeart() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
	var ctx = canvas.getContext('2d');
	var lineargradient = ctx.createLinearGradient(0,0,150,150);
	lineargradient.addColorStop(0,'white');
	lineargradient.addColorStop(1,'black');
	
	ctx.beginPath();
	ctx.moveTo(75,40);
	ctx.bezierCurveTo(75,37,70,25,50,25);
	ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
	ctx.bezierCurveTo(20,80,40,102,75,120);
	ctx.bezierCurveTo(110,102,130,80,130,62.5);
	ctx.bezierCurveTo(130,62.5,130,25,100,25);
	ctx.bezierCurveTo(85,25,75,37,75,40);
	ctx.fillStyle = lineargradient;
	ctx.fillStroke = "red";
	ctx.fill();
	ctx.stroke();
  }
}

						
						

Images

We can use images from scratch using new Image() method or we can use images that already exist on the page by using document.getElementById()

						
var img = new Image();   // Create new img element
img.src = 'myImage.png'; // Set source path					
						
						

drawImage(image, x, y)

Once the image loads, we can use drawImage() to render it on the canvas. Make sure the image loads before calling the method.

Scaling and slicing slicing

The image can also be scaled by using drawImage(image, x, y, width, height)

the image can be sliced by using drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

Text and text shadow

Canvas text support is actually pretty good - you can control font, size, color, horizontal alignment, vertical alignment, and you can also get text metrics to get the text width in pixels. In addition, you can also use canvas transforms to rotate, stretch and even invert text. The text can use colors or patterns.

Canvas can take advantage of fonts defined in a CSS file using @font-face, and can fall back to multiple different fonts if the defined font is not available. It's important to know that Canvas text does not use CSS for styles.

Example

							

function drawText() {
  var canvas = document.getElementById('canvas-text');
  if (canvas.getContext){
	var ctx = canvas.getContext('2d');
	ctx.font = "50px SapientSansLightItalic";
	ctx.fillStyle = "#FF0000";
	ctx.fillText ("Sapient Nitro", 50, 80);
  }
}

							
							

Text shadow example

							

function drawText() {
  var canvas = document.getElementById('canvas-text');
  if (canvas.getContext){
	var ctx = canvas.getContext('2d');
	ctx.shadowOffsetX = 2;
	ctx.shadowOffsetY = 2;
	ctx.shadowBlur = 2;
	ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
	ctx.font = "50px SapientSansLightItalic";
	ctx.fillStyle = "#FF0000";
	ctx.fillText ("Sapient Nitro", 50, 80);
  }
}

							
							

measureText()

measureText() method will return some properties about that text, based on the current context settings (font face, size, and so on) in the form of a TextMetrics object. The TextMetrics object has only a single property: width. The width property of a TextMetrics object gives you the exact width in pixels of the text when rendered on the canvas. This can be very useful when attempting to center text.

Examples

http://www.html5rocks.com/en/tutorials/canvas/texteffects/