HTML5 notes

From Devipedia

Jump to: navigation, search

Areas of interest:



Web Storage

Offline storage database

Canvas element


I ran into issues drawing video onto a canvas. DrawImage is invoked like so:

ctx.drawImage(video, sx, sy, sw, sh, dx, dy, dw , dh);

According to

The source rectangle is the rectangle whose corners are the four points (sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh).

If one of the sw or sh arguments is zero, the implementation must raise an INDEX_SIZE_ERR exception.

The destination rectangle is the rectangle whose corners are the four points (dx, dy), (dx+dw, dy), (dx+dw, dy+dh), (dx, dy+dh).

When drawImage() is invoked, the region of the image specified by the source rectangle must be painted on the region of the canvas specified by the destination rectangle, after applying the current transformation matrix to the points of the destination rectangle.

Suppose the source frame is 300x300px and the canvas is 300x300px. If no transformation is applied before the display, this will render the video at the same resolution as the source video. However, if a transformation is applied that causes the image to exceed the canvas size, an exception may be raised. At least on Firefox the exception is raised and the rendering fails. Chrome seems to be able to handle this error condition transparently.

This is what I discovered after tracing down error messages like this that were reported in Firebug.

Index or size is negative or greater than the allowed amount
[Break On This Error] ctx.drawImage(video, 0, 0,... 0, 0, canvas.width , canvas.height); 

Audio and video elements

Drag and drop

Cross document messaging


Semantic enrichment

Markup enhancements




Personal tools