[HTML5] Canvas – Advanced Features

 

The <canvas> element is a nice addition to HTML5. You can draw graphics only with HTML and JavaScript. The core graphic object is the context object, which provides many drawing related properties and methods. Besides the basic drawing features such as fill() or stroke(), the context object provides less used but highly useful features such as transformations.

1. Saving and Restoring Context Object

To draw or stroke, you need to set the appropriate styles of the context object. If you want to reuse the specific state of the context, you can use the “save()” and “restore()” methods.

var context = document.getElementById("mycanvas").getContext("2d");
context.fillStyle = "#0000FF";
context.fillRect(0, 0, 100, 100); // blue
context.save();
context.fillStyle = "#FF0000";
context.fillRect(100, 0, 200, 100); //red
context.restore();
context.fillRect(200, 0, 100, 100); // blue again

This technique is also used to clear all the custom settings.

 

2. Clearing

The “clearRect(x, y, width, height)” method is used to clear the specified area.

var context = document.getElementById("mycanvas").getContext("2d");
context.fillStyle = "#FF0000"; //red
context.fillRect(0, 0, 200, 200);
context.clearRect(25, 25, 150, 150);

It draws the red frame.

 

3. Translating

The “translate(x, y)” method remaps the (0,0) position on the canvas. It is useful when you reuse drawing methods regardless the absolute position.

function draw_circle(ctx) {
  ctx.fillStyle = "#FF0000";
  ctx.beginPath();
  ctx.arc(50,50,50,0,2*Math.PI);
  ctx.fill();
}
function draw_rectangle(ctx) {
  ctx.fillStyle = "#0000FF";
  ctx.fillRect(15, 15, 75, 75);
}
$(document).ready(function () {
  var context = document.getElementById("mycanvas").getContext("2d");
  draw_circle(context);
  context.translate(0, 100); // (0,100) becomes (0,0)
  draw_rectangle(context);
});

Without using the “translate()” method, 2 drawings will be overlapped.

 

4. Scaling

The “scale(scalewidth, scaleheight)” method is used to scale the current drawing bigger or smaller. The scale 1 means 100%. (0.5 = 50%, 2 = 200%).

It is also useful when you reuse drawing methods.

function draw_circle(ctx) {
  ctx.fillStyle = "#FF0000";
  ctx.beginPath();
  ctx.arc(50,50,50,0,2*Math.PI);
  ctx.fill();
}
$(document).ready(function () {
  var context = document.getElementById("mycanvas").getContext("2d");
  draw_circle(context);
  context.translate(0, 100); // (0,100) becomes (0,0)
  context.scale(2, 2); // 2 times bigger
  draw_circle(context);
});

 

5. Rotating

The “rotate(angle)” method does not rotate the existing drawings. The rotation will only affect drawings made AFTER the rotation is called. The angle is in radian.

var context = document.getElementById("mycanvas").getContext("2d");
context.fillStyle = "#FF0000"; //red
context.fillRect(0, 0, 100, 100);
context.rotate(45 * Math.PI / 180); // 45 degree
context.fillStyle = "#0000FF"; //blue
context.fillRect(100, 0, 100, 100);

 

6. Transformation

Each context object has a transformation matrix. Whenever the “transform(a,b,c,d,e,f)” method is called, the transformation matrix is replaced by multiplying the current matrix and the matrix specified by the transform() method.

a c e

b d f

0 0 1

  • a : scales horizontally
  • b : skew horizontally
  • c : skew vertically
  • d : scales vertically
  • e : moves horizontally
  • f : moves vertically

The default matrix is the identity matrix, that does not tranform anything.

1 0 0

0 1 0

0 0 1

The “transform()” method is used with other transformation methods such as “scale()“. The effect will be accumulative.

The “setTransform(a,b,c,d,e,f)” method resets the current transform to the identity matrix and apply the transformation. It is useful when you want to clear previous transformations.

var context = document.getElementById("mycanvas").getContext("2d");
context.fillStyle = "#FF0000"; //red
context.fillRect(0, 0, 50, 50);
context.transform(2, 0, 0, 2, 0, 0); // scale 2 times
context.fillRect(50, 0, 50, 50);
context.setTransform(1, 0.5, 0, 1, 0, 0); // skew
context.fillRect(100, 100, 50, 50);

 

7. Saving Canvas to an Image

You can returns the content of the current canvas as an image that you can use as a source for another canvas or an HTML element (such as img).

  • toDataURL(type,  jpegQuality)

The type can be “image/png” (default) or “image/jpg”. If the image is jpg, you can specify the quaility from 0.0 to 1.0.

function putImage() {
  var canvas1 = document.getElementById("canvas1");
  var ctx = canvas1.getContext("2d");
  var myImage = canvas1.toDataURL("image/png");
  var imageElement = document.getElementById("myImg");
  imageElement.src = myImage;
}

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s