What can you do with <canvas>

[beteljuice]

Ye Olde beteljuice wondered if the this here new-fangled <canvas> thingy could manipulate images ?

The simple answer is yes !!

A few of you may remember some years ago when Cumulus was steam powered, that the beteljuice created a nautical theme 'dashboard' which relied on a huge library of needle images ?

Here is the beteljuices very first attempt at using canvas "Nautica" revisited

I was unsure whether to post this or not (It is by no means meant to be an empirical example !)
but I decided it may give hope / inspiration to others and perhaps start an entire rethink of how we display data content in web pages.

[PaulMy]

It sure looks like a precision instrument

Looked up <canvas> element in Google to get a better understanding.
Paul

[mcrossley]

I wondered if you would ever update that one

'course now you could eschew the canvas and just do it with CSS3 à la: Climatica

[beteljuice]

... and just do it with CSS3

We need a "groan" smiley ....

I don't know what I'm doing with 'ordinary' CSS, JScript, JSON, HTML5, etc. etc. etc.

[steve]

We need a "groan" smiley ....

Happy to oblige...

[mcrossley]

Looked up <canvas> element in Google to get a better understanding.

Paul, the SteelSeries gauges are <canvas> based, they don't use images directly though, everything is 'drawn'.

[mcrossley]

beteljuice, you may want to investigate 'requestAnimationFrame()', it is more efficient that than using timers (though you may have to provide a timer fallback) if you have multiple animations going on, you should be able to get 60 fps out of that page. I use the following shim in the SteelSeries library (I haven't checked it is up to date for some time though).

Code: Select all

    var requestAnimFrame = (function () {
        return  window.requestAnimationFrame   ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.oRequestAnimationFrame      ||
            window.msRequestAnimationFrame     ||
            function (callback) {
                window.setTimeout(callback, 1000 / 16);
            };
    }());