Design, CG Graphics & Inspiration
HTML5 Canvas: Frequently Asked Questions

HTML5 Canvas: Frequently Asked Questions

In this post I would like to share some information about HTML5 Canvas in F.A.Q. format.

1. What is Canvas, for which purposes do we need it, which browsers support it, what is the main area of its use, how developed are the frameworks, some examples?

Canvas is a low-level API for redrawing graphics. It is supported by all modern browsers, except of older versions of IE (8 and below). Frameworks are developed, although they still need to grow up. Basic examples can be found on the MDC. More powerful examples can be found on such sites as Chrome Experiments or in the examples of applications on frameworks, for example LibCanvas.

2. When should I use Canvas and when Flash?

Flash is faster, and has no cross-browser problems. There are a lot of good tools and frameworks in Flash. Canvas is now used mainly by enthusiasts and experimenters. People who use flash have no reasons to leave the market. But Canvas is being developed by such major players as Google, Mozilla, Apple, Microsoft, all of them optimize and speed up the redrawing of Canvas, gradually the “old” browsers pass away and the new ones appear. Take a look at Firefox 2.0 and Firefox 4.0. For three years its speed has increased significantly and the major leap was made with the release of the fourth version. Similarly was with the Opera. Also, Chrome has appeared with 12 versions of its browser during this time. In general, HTML5 and Canvas have a bright future.

3. When should I use Canvas and when SVG?

It’s a holy-war topic and it has a lot of viewpoints.
Take a look at this picture:
canvas-svg in HTML5 Canvas: Frequently Asked Questions
Read the article “Thoughts on when to use Canvas and SVG

On the one hand, by using Canvas there will be a need to implement what has already been implemented in SVG. On the other hand, in Canvas you can apply such optimizations which aren’t possible in SVG, such as redrawing from the cache. On mobile phones it’s better to use CSS3 instead of SVG and Canvas, as it accelerates hardware and works smoothly.

4. What should I read on this topic?

I recommend starting with the Mozilla Developers Network, you can find there a good description of Canvas basics with the examples. After that, create yourself a task and try to implement it. API is very simple, the main thing is experience.

There is a recent book “HTML5 Canvas” published by O’Reilly Media. I haven’t read it yet, but typically O’Reilly produces great books.
html5-canvas in HTML5 Canvas: Frequently Asked Questions

5. How to make a screenshot in Canvas?

There is a small library canvas2image, it allows you to save Canvas on the server and on the client. On the client the saving is realized with the help of toDataURL. The server receives the content using getImageData, then it is transmitted in base64 code and send as a POST-request. It’s quite enough to code something like this on the server:

if (empty($_POST['data'])) exit;

$data = $_POST['data'];
$name = md5($data);
$file = "$path/$name.png";
if (!file_exists($file)) {
	$image = str_replace(" ", "+", $data);
	$image = substr($image, strpos($image, ","));
	file_put_contents($file, base64_decode($image));
}
echo $file;

Also, if the “Canvas Screenshot === Save Canvas as a picture”, then:

/* first */ canvas.getAsFile("test.jpg", "image/jpeg"); // File https://developer.mozilla.org/en/DOM/File
/* second */ canvas.toDataURL(); // String of the format data url

/* example */
function test() {
 var canvas = document.getElementById("canvas");
 var f = canvas.mozGetAsFile("test.png");
 
 var newImg = document.createElement("img");
 newImg.src = f.toDataURL();
 document.body.appendChild(newImg);
}

Read this

It’s important for you to set the fixed sizes of the canvas (in width / height or style), otherwise you’ll get a bad data from toDataURL.

6. What are the methods of improving the performance (increase of fps)?

There are different optimization methods that depend on the application. Three of them I’ve described in the topic “Fifteen” puzzle in LibCanvas. They are:

• Updating the canvas only if it’s necessary
• Instead of redrawing the entire canvas to redraw only the changed chunks
• Redrawing objects to the clipboard (it allows you to draw each frame of the object as a set of pixels and not to apply all the filters and a bunch of mathematical analyses)
The profiler in your favorite browser will help you a lot.

7. How to work with video capture?

If you’re talking about capturing video from a camera: API is only in draft specifications Media Capture API, the next release of the specification is possible in PhoneGap – maybe there’s in a trunk. It’s very simple to work with it. Each frame is transmitted as an image format data url:

function success(data) {
  var container = document.createElement("div");
  
  for (var i in data) {
    var img = document.createElement("img");
    img.src = data[i].url;
    container.appendChild(img);
  }
  document.body.appendChild(container);

}
 
function error(err) {
  if (err.code === err.CAPTURE_INTERNAL_ERR) {
    alert("The capture failed due to an internal error.");
  }
  else {
    alert("Other error occured.");
  }
}
 
navigator.device.capture.captureImage(success, error, { limit: 1 });
8. What is the most effective solution at this point for pixel access when drawing any images in Canvas (without WebGL)? For example, hand-drawing of the faces in the construction of 3D using Gouraud / Phong shading.

For pixel access there is only one solution – to use getImageData.

9. Is there a way to scale an effective and cross-platform canvas with all the interiors to fit the screen?

Try to use CSS. Canvas {width: 100%; height: 100%}. Something like this. But the js-code should consider this piece, because the coordinates will displace.

10. Support and performance for Android / iOS devices.

They are fully supported. However, I’ve noticed that iPhone2 doesn’t support fillText, but this is the only minus. There might be some problems with performance. It’s better to use CSS3 for mobile phones. Perhaps something will change in the future.

11. What is the fastest way to draw a point (eg, for a graph)? One-pixel and four-pixel, in any color.

The fastest way in terms of performance is using fillRect for single redrawings and getImageData + putImageData for mass redrawings.

12. In what format stored, displayed and redrawn the “world” in the games with a side view (as playbiolab.com), ie player runs to the right and the camera moves along with him, and accordingly, the world “moves” too.

I do not know how it is done in the biolab. But there are several ways to do this. For example, you can overlay several layers of canvas at each other, draw the world on the lower one, and display the desired part with the help of CSS.

13. 3d-canvas.

Three.js – 3d engine on Javascript.

14. What editors should I use?

Fits any JavaScript editor. Previously I used Netbeans 7 and now I switched to Jetbrains WebIde

15. The database.

There are two modern standards for data storage on the client’s side, they are webStorage and IndexedDB. IndexedDB is a cool interface with lots of features and webStorage is simple key-value storage.

16. Canvas and IE.

Canvas is supported only by the ninth version of IE. All attempts to make it possible to support it are suitable only for a very narrow range of tasks and do not give a good speed. In my humble opinion, the only option is Google Chrome Frame, a plugin that is installed as Flash or SilverLight and turns Internet Explorer into a modern browser.

17. How to calculate the distance between the drawn objects, are there any ready-made solutions?

It depends on the objects. Some things are done very simply. For example, the distance between the points considered by the Pythagorean theorem. To calculate the distance between the circles you should count the distance between the points and subtract the radii. More complex geometric figures have their own laws. Some of them (at least the intersection of rectangles / circles / polygons) are already in LibCanvas. If you have any special requirements then it’s necessary to search for algorithms. I can advise you to read this: Known algorithms for collision detection and response to them in Flash.

18. How and by what means it is better to do animations on Canvas?

If you have any animation and the ability to change only one object, then you can bind to the event of frame change:

var MyObject = atom.Class({
	[...],

	initialize : function () {
		this.animation = new Animation()
			[...]
			.addEvent( 'changed', this.redraw.bind(this) );
	},

	redraw: function () {
		this.clear().draw();
	},

	draw : function () {
		this.libcanvas.ctx.drawImage(
			this.animation.getSprite(),
			this.shape
		);
	}
});
19. Working with text in Canvas (including animating).

Text is drawn with the help of fillText / strokeText. You can connect your own fonts with CSS3. All the rules influence on it such as shadows, transformations, color settings, etc. For example, it’s easy to make glowing text using a light shade on a dark background.

20. Working with images.

On MDC you can find information on how to work with images.

21. Using the Back Buffer, how to redraw one Canvas to another.

You can redraw some information into the hidden Canvas, which is then used just like a picture (see the previous item). Buffering allows to accelerate the redrawing many times. For example, to redraw a gradient from buffer is 5 times faster than to redraw the same gradient directly. It is very simple in use:

// Create the buffer of a necessary size:
var buffer = document.createElement('canvas');
buffer.width  = 64;
buffer.height = 32;
buffer.ctx    = buffer.getContext('2d');
// or with the help of LibCanvas:
var buffer = LibCanvas.Buffer(64, 32, true);

// redraw everything we need
buffer.ctx.fillRect(/* */)

// redraw it into our canvas:
var ctx = canvas.getContext('2d');
ctx.drawImage( buffer, 0, 0 );
22. Animation in canvas is made by a full redrawing. Thus, information about all objects stored in the JS object, and should be redrawn each time, or it is possible to create sprites and layers?

Yes, there are a variety of techniques. You can use the buffer in order not to draw dozens of small objects, you can redraw the canvas only partially, but often it’s cheaper simply to redraw everything, than to understand what must be redrawn.

23. I would like to learn how to use the canvas to draw a 3D object (preferably from the perspective), and to rotate it?

HTML5 Experiment: A Rotating Solid Cube

24. Drawing SVG in Canvas.

Can be implemented with the help of CanVG.

25. How different is the support for browsers or all of them follow the standard?

The differences are minimal. Minor bugs were found, light mismatches. For example, the Opera could not draw a rectangle with the negative sizes of the sides:

ctx.fillRect(50, 50, -20, -20);

The pictures are being shrunk and rotated differently. For example, in Chrome when turning on the corners one can notice the unequality (no smoothing).
no-ant in HTML5 Canvas: Frequently Asked Questions
But it stretches the pictures better than the Firefox and Opera:
no-ant in HTML5 Canvas: Frequently Asked Questions

There are still minor differences in JavaScript. For example, some browsers sort implements an unstable sorting, so that if the elements are sorted along the Z-index, the elements with the same Z-index will be constantly changing places.
These are very minor nuances. The majority are hidden behind friendly API frameworks. Personally, I develop only for one browser and in most cases it works quite well in others.

26. putImageData vs drawImage.

I will be brief – putImageData is much slower. Moreover, with the increase of the picture’s size, increases the slowness.

27. It would be very interesting to read about the implementation of the basic functional model – canvas-libraries, such as emulation of the layers, the definition of active element (which is currently under the cursor), a system event management, etc.

The question everyone asks me most often and here is a separate topic.

You might also be interested in..

Creating a Framework For Canvas: Objects and Mouse
Fifteen puzzle in LibCanvas
Timesaving Tools and Services for Web Developers
HTML5 Placeholder stylization with the help of CSS
20 Free HTML5 Games
How to create a Progress bar with HTML5 Canvas
Meet The Future – HTML5 Demos

  • TheShock,
  • August 11, 2011

SHARE THIS POST

Pavel is 21 year old web developer from Ukraine. In his spare time he writes articles about the basics of LibCanvas, AtomJS and JavaScript

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • I’m going to geek out on all these HTML5 Canvas resources Thanks
    for continuing to find innovative and useful ways to help all of us! Very
    creative!

     

  • Rorysplashnology

    Can you help me read from an IP Camera? I’m a noob with HTML5 but I can read from my camera into a canvas. The trouble is I can’t read the data using getImageData() — probably because of “cross origin” issues. All I want is to point the camera at a light and determine if the light is on or off. Can you please suggest a solution?

  • I’m going to geek out on all these HTML5 Canvas resources Thanks
    for continuing to find innovative and useful ways to help all of us! Very
    creative!

     

  • Rorysplashnology

    Can you help me read from an IP Camera? I’m a noob with HTML5 but I can read from my camera into a canvas. The trouble is I can’t read the data using getImageData() — probably because of “cross origin” issues. All I want is to point the camera at a light and determine if the light is on or off. Can you please suggest a solution?