Tag Archives: canvas

jQuery Progress Wheel indicator

This progress wheel indicator only takes a few lines of code to get up and running and provides a great way to communicate completion to your users! Works in modern browsers supporting the canvas element, and defaults back to a clear text counter in older browsers.this control supports the following features: Easy to initiate and control values; Configurable scrolling speed; Callback function for when the control reaches 100% can be specified; Easy to control appearance, including: Solid colours, radial gradients, and images, and transparency (why not make the indicator an irregular shape, lik…

jQuery Progress Wheel indicator





Under the Hood: Bubbles

In an earlier post we discussed JavaScript performance improvements introduced in IE10. Today we published Bubbles, originally inspired by Alex Gavriolov’s simulation BubbleMark, to explore some of these advances. The current version has been greatly expanded to take advantage of the new features of the Web platform and includes characteristics common to HTML5 games. in this post we peek under the hood to see how the demo is constructed and examine the main factors that affect its performance.


Bubbles demo running in Metro style IE10 on the Windows 8 Release Preview

The Structure of the Demo

The demo consists of a number of animated bubbles floating through space. at the core is a relatively simple JavaScript physics engine. On every animation frame, about 60 times per second, the physics engine recalculates the positions of all bubbles, adjusts the speed of each bubble by applying gravity, and computes collisions. All these computations involve intensive floating point math. Each bubble is represented on screen by a DOM image element to which a CSS transform is applied. The image is first translated around its origin, and then scaled dynamically to produce the effect of the bubble inflating. in JavaScript, every bubble is represented as an object with accessor properties, as introduced in ECMAScript 5.

Behind the floating bubbles is a large image, which starts off occluded by a fully opaque mask rendered in a <canvas> element. Whenever two bubbles collide, a portion of the occluding mask is removed by applying a Gaussian filter to the mask’s opacity component to produce a diffuse transparency effect. this process also involves many floating point multiplications, which are performed on elements of Typed Arrays, if supported by the browser.

Over the floating bubbles rests a touch surface, which responds to touch input if supported by the running browser or mouse events if not. in response to touch simulated magnetic repulsion is applied to the floating bubbles scattering them around.

Efficient Animation

In IE10 we introduced support for the requestAnimationFrame API. when building JavaScript applications with animation we continue to recommend using this API (instead of setTimeout or setInterval) on browsers that support it. As discussed in a previous post exploring how to make the most of your hardware, this API allows you to achieve maximum frame rate supported by the available display while avoiding excessive work that would remain invisible to the user. By doing the minimal number of operations to deliver the best user experience, you can save battery power. IE10 Release Preview supports this API without vendor prefix, but the prefixed version is also maintained for compatibility with earlier IE10 preview releases. The Bubbles demo uses this API and falls back to setTimeout when it is not available.

Demo.prototype.requestAnimationFrame = function () {

var that = this;

if (window.requestAnimationFrame)

this.animationFrameTimer =

window.requestAnimationFrame(function () { that.onAnimationFrame(); });

this.animationFrameTimer =

setTimeout(function () { that.onAnimationFrame(); }, this.animationFrameDuration);

Demo.prototype.cancelAnimationFrame = function () {

if (window.cancelAnimationFrame)

window.cancelAnimationFrame(this.animationFrameTimer);

clearTimeout(this.animationFrameTimer);

Converting DOM Values from Strings to Numbers

JavaScript is very flexible and includes a range of automatic conversions between values of different types. for example, string values are automatically converted to number values when used in arithmetic operations. in modern browsers, this convenience may come at a surprisingly high performance cost. Type specialized code emitted by state-of-the-art JavaScript compilers is very efficient in arithmetic on values of known types, but incurs very high overhead when it encounters values of unexpected types.

When the Bubbles demo is loaded, the numberOfBubbles property starts off with a value of 100. On every animation frame, the position of each bubble is adjusted:

this.numberOfBubbles = 100;

Demo.prototype.moveBubbles = function(elapsedTime) {

for (var i = 0; i < this.numberOfBubbles; i++) {

this.bubbles[i].move(elapsedTime, this.gravity);

When the user selects a different value in the UI, the value of the numberOfBubbles property must be adjusted accordingly. A straightforward event handler may do it like this:

Demo.prototype.onNumberOfBubblesChange = function () {

this.numberOfBubbles = document.getElementById(“numberOfBubblesSelector”).value;

This seemingly natural way of reading the user’s input results in about 10% overhead in the JavaScript portion of the demo. Because the value obtained from the drop down and assigned to numberOfBubbles is a string (not a number), it has to be converted to a number on every iteration of the moveBubbles loop for every frame of the animation.

This demonstrates that it’s a good practice to explicitly convert values extracted from the DOM to numbers before using them in arithmetic operations. Values of DOM properties are typically of type string in JavaScript and the automatic string to number conversions can be quite expensive when done repeatedly. A better way to update numberOfBubbles based on user selection, as found in the demo, is as follows:

Demo.prototype.onNumberOfBubblesChange = function () {

this.numberOfBubbles = parseInt(document.getElementById(“numberOfBubblesSelector”).value);

Working with ES5 Accessor Properties

ECMAScript 5 accessor properties are a convenient mechanism for data encapsulation, computed properties, data validation, or change notification. in the Bubbles demo, whenever a bubble is inflated the radius is adjusted, which sets the computed radiusChanged property to indicate that the bubble’s image needs to be resized.

Object.defineProperties(Bubble.prototype, {

set: function (value) {

if (this.mRadius != value) {

this.mRadius = value;

this.mRadiusChanged = true;

In all browsers, accessor properties add overhead as compared to data properties. The precise amount of overhead varies between browsers.

Minimizing Access of the Canvas ImageData

It’s a well-established practice to minimize the number of calls to DOM in loops on the critical performance path. for example, if the Bubbles demo updated the location of every bubble by looking up the corresponding element in the document (as below), performance would be adversely affected.

Bubble.prototype.render = function () {

document.getElementById(“bubble” + this.id).style.left = Math.round(this.x) + “px”;

document.getElementById(“bubble” + this.id).style.top = Math.round(this.y) + “px”;

Instead, the element corresponding to each bubble is cached in the bubble object in JavaScript once, and then accessed directly on every animation frame.

Bubble.prototype.render = function () {

this.element.style.left = Math.round(this.x) + “px”;

this.element.style.top = Math.round(this.y) + “px”;

What may be less clear is that care must be taken to avoid similar overhead when working with <canvas>. The object obtained by calling canvas.getContext(“2D”).getImageData() is also a DOM object. The code below could be used in the demo to draw the bubble collision effect to the canvas. in this version imgData.data is read on every iteration of the loop, which requires a call to the DOM and adds great overhead.

BubbleTank.prototype.renderCollisionEffectToCanvas = function(px, py) {

var imgData = this.canvasContext.getImageData(/*…*/)

for (var my = myMin; my <= myMax; my++) {

for (var mx = mxMin; mx <= mxMax; mx++) {

var i = (mx + gaussianMaskRadius) + (my + gaussianMaskRadius) * gaussianMaskSize;

imgData.data[4 * i + 3] = 255 * occlusionMask[(px + mx) + (py + my) * canvasWidth];

this.canvasContext.putImageData(imgData, px – gaussianMaskRadius, py – gaussianMaskRadius);

A better way to update the <canvas> image data is by caching the data property as in the following code snippet. The data property is a typed array (PixelArray) and can be accessed very efficiently from JavaScript.

BubbleTank.prototype.renderCollisionEffectToCanvas = function(px, py) {

var imgData = this.canvasContext.getImageData(/*…*/)

var imgColorComponents = imgData.data;

for (var my = myMin; my <= myMax; my++) {

for (var mx = mxMin; mx <= mxMax; mx++) {

var i = (mx + gaussianMaskRadius) + (my + gaussianMaskRadius) * gaussianMaskSize;

imgColorComponents[4 * i + 3] =

255 * occlusionMask[(px + mx) + (py + my) * canvasWidth];

this.canvasContext.putImageData(imgData, px – gaussianMaskRadius, py – gaussianMaskRadius);

Using Typed Arrays to Store Floating Point Numbers

In IE10 we added support for Typed Arrays. when working with floating point numbers it is advantageous to use Typed Arrays (Float32Array or Float64Array) instead of JavaScript arrays (Array). JavaScript arrays can hold elements of any type, but typically require that floating point values be allocated on the heap (boxing) before being added to the array. this affects performance. To achieve consistently high performance on modern browsers use Float32Array or Float64Array to indicate the intent of storing floating point values. doing so you help the JavaScript engine avoid heap boxing and turn on other compiler optimizations, like generating type specialized operations.

BubbleTank.prototype.generateOcclusionMask = function() {

if (typeof Float64Array != “undefined”) {

this.occlusionMask = new Float64Array(this.canvasWidth * this.canvasHeight);

this.occlusionMask = new Array(this.canvasWidth * this.canvasHeight);

this.resetOcclusionMask();

The example above shows how the Bubbles demo uses Float64Arrays to hold and update the occlusion mask applied to the canvas hiding the background image. If the browser doesn’t support Typed Arrays, the code falls back on regular arrays. The gains from using Type Arrays in the Bubbles demo vary with settings. in a medium-sized window in IE10, Typed Arrays improve the overall frame rate by around 10%.

Summary

In this blog post we explored the newly published Bubbles demo and examined how it takes advantage of dramatic gains in JavaScript execution the IE10 Release Preview. we shared a few important techniques to achieve good performance in animation-based applications. for more technical details about the changes in the JavaScript runtime (Chakra) in IE10 Release Preview, please, refer to the earlier post. we are excited about the greatly improved performance and new capabilities available in IE10 Release Preview and we hope they will allow for ever more fascinating applications to be build using Web standards and technologies.

—Andrew Miadowicz, Program Manager, JavaScript

Under the Hood: Bubbles

CANVAS vs. SVG vs. Flash

These are three tools you can use to add animation and interactivity to your websites. There are benefits and drawbacks to all of them. Find out the differences between these three technologies and why you might choose one over another.

Read the full article: How is the CANVAS Element Different from SVG and Flash

Using CANVAS, SVG, and Flash

Image © 2012 J Kyrnin – licensed to about.com

CANVAS vs. SVG vs. Flash

Spring into St. Patrick’s Day with HTML5

Another holiday brings us another opportunity to celebrate it with you. We’re pleased to mark the transition into spring as well as St. Patrick’s Day with Irish Spring, a new hardware-accelerated HTML5 experience that shows the benefits of Internet Explorer 10 on Windows 8 Consumer Preview.

Irish Spring incorporates HTML5 canvas and CSS gradients, opacity, transforms, and animation along with HTML5 audio. with the Windows Consumer Preview and IE10’s support for multi-touch you can propel the clovers and leaves around in a strangely satisfying fashion. Try it with multiple fingers on your touch device. Alternatively, you can use your mouse to move the clovers around the screen.

If you aren’t using Internet Explorer 10 and think your browser can still handle the heat, give it a shot. but don’t be surprised if the lack of multi-touch and full hardware acceleration leaves you wanting to install the Windows 8 Consumer Preview.

This video shows IE10′s support for multi-touch and hardware acceleration in action with Irish Spring.

Put a little spring in your friends’ step by clicking the share controls at the top of the demo.

From the entire IE team, we wish you a happy, safe, and lucky St. Patrick’s Day!

—Tobin Titus, Program Manager, Internet Explorer

Spring into St. Patrick’s Day with HTML5

Real World HTML5 and CSS3

If you’ve been considering HTML5 or CSS3 but haven’t been willing to make the jump yet, then this book might be just the ticket. It’s not a book that will teach you HTML or CSS, but if you already have familiarity with them, it will help you update your websites to more modern technology.

Learn more by reading my review: HTML5 and CSS3 for the Real WorldOther HTML5 and CSS3 Book Reviews

Real World HTML5 and CSS3

‘Donatello’ Library Simplifies CSS 3 Drawings

Most modern browsers support the HTML5 canvas element and SVG for drawing and animating. There are, however, some cases — particularly with mobile browsers — where it might make more sense to use CSS-based drawing tools.Donatello is a JavaScript library that can do much of what the Raphaël JS drawing library does, but instead of [...]

‘Donatello’ Library Simplifies CSS 3 Drawings