Page 1 of 1
What can you do with <canvas>
Posted: Fri 23 May 2014 11:14 am
by 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.
Re: What can you do with <canvas>
Posted: Fri 23 May 2014 12:55 pm
by PaulMy
It sure looks like a precision instrument
Looked up <canvas> element in Google to get a better understanding.
Paul
Re: What can you do with <canvas>
Posted: Fri 23 May 2014 1:06 pm
by 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
Re: What can you do with <canvas>
Posted: Fri 23 May 2014 2:10 pm
by 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.
Re: What can you do with <canvas>
Posted: Fri 23 May 2014 2:30 pm
by steve
beteljuice wrote:We need a "groan" smiley ....
Happy to oblige...
Re: What can you do with <canvas>
Posted: Fri 23 May 2014 4:37 pm
by mcrossley
PaulMy wrote: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'.
Re: What can you do with <canvas>
Posted: Sat 24 May 2014 10:52 am
by 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);
};
}());