PDA

View Full Version : HTML5 Canvas and Animation



vangogh
05-04-2010, 10:44 PM
Found this site today with a lot of demos showing off html5 canvas and some of the cool things you can do with it. The site is canvasdemos.com (http://www.canvasdemos.com/) and if you're into web design and development there's some really cool stuff to see there.

You'll need to be using a browser that supports html5 canvas so no Internet Explorer. I browsed with Safari and most everything works. I think Chrome is probably what you want to use to see everything.

What's really exciting is all the stuff you see is mainly done with html, css, and javascript. No Flash needed.

You can see there's still a way to go with this stuff, but you can also see that even now a lot can be done.

Has anyone started working with html5 canvas or even html5 yet? I know I haven't. I'm mostly in the bookmarking stage, but I do want to start experimenting soon. I think there are quite a few things you can do right now in html5 that will work cross browser, though a few things might need some javascript help for IE.

vangogh
05-13-2010, 08:13 PM
I guess no one was interested.

nealrm
05-14-2010, 09:09 AM
The 3D earth was impressive.

vangogh
05-14-2010, 10:42 AM
I thought a few of the demos were pretty good. Maybe I get more excited about this stuff than other people, because I'm thinking more about the technology making this stuff happen. There's no video here, it's all code.

These are also just early starts. It'll be interesting to see what people come up with a year or two from now.

billbenson
05-14-2010, 10:00 PM
How does document size etc compare with flash?

vangogh
05-14-2010, 10:26 PM
It's likely going to be much smaller since it's all done in code instead of requiring the Flash file. I say likely because I can imagine someone will end up doing something so big with so much JavaScript that it could be larger than a Flash file. In general it should be smaller I would think.

You also don't need any plugin. This is all happening in the browser. Remember before you can view Flash files you browser needs a Flash plugin.

Think of it like the difference between using an image to display your entire site and coding the site.

jamestl2
05-14-2010, 10:28 PM
Haven't really been testing new things in HTML5 yet, don't know how much of it's completely supported. Although that game design aspect looks pretty interesting.

I've recently been working with image manipulation in PHP. Not sure how many here are familiar with it, but I've playing around with and editing code in Image Magick, or more specifically, it's PHP counterpart, Imagick (http://php.net/manual/en/book.imagick.php). You're able to draw and color images dynamically, and there's a ton of neat functions available for it.

vangogh
05-14-2010, 10:51 PM
I haven't done much with html5 yet either, though I'm thinking when I redesign my site it'll be html5. It's backwards compatible and for the most basic stuff it's only IE that won't handle things. I think IE9 is going to be a big step forward for IE, which is good and there are JavaScript libraries and a few simple JavaScript things you can do to make older versions of IE accept some html5 and css3 stuff.

I never played with php image manipulation. What do you think of it so far? Is it easy to learn? How much can it do?

I think WordPress has been using html5 for the last year or so. If you look the default theme is using <!doctype html> which is html5. It's definitely in 3.0, but I think they started included it in 2.9

jamestl2
05-23-2010, 05:59 PM
What do you think of it so far? Is it easy to learn? How much can it do?


It's pretty interesting, actually, and easy to use and simple to learn, provided one has PHP experience.

It offers a variety of functions based on various classes (like object creation, drawing, etc.).

So far, what I've used it for, is providing the ability for users to write their own lines of text onto an image and they can select from different settings. One of the iMagick functions combines various multiple images being used into one.

vangogh
05-25-2010, 11:51 AM
Cool. I'm starting to play more with html5 and css3. html5 is backwards compatible so you can define a page with an html5 doctype and not have to worry about it. As far as css 3 I'm thinking developing with progressive enhancement is the way to go. Make sure your site works for the least browser you want to support and then add things so people using those browsers that can do more have a richer experience.

jamestl2
05-25-2010, 03:13 PM
I hope it's use gets more widespread soon too.

One of my favorite features of CSS3 is the border-radius property. It greatly reduces the hassle and creation of Rounded Corners. It creates them with ease.

vangogh
05-25-2010, 07:32 PM
There's a jQuery script (http://jquery.malsup.com/corner/) that lets you add them for IE.

The thing is you can develop a site so it works fine in IE and then use things like rounded corners for those browsers that support it. That's the idea behind progressive enhancement. Just because one or more browsers can't render something doesn't mean you can't use it. As long as you make sure the site still looks good across browsers it's perfectly fine if they look a little different in each of them.

jamestl2
05-29-2010, 04:51 PM
The thing is you can develop a site so it works fine in IE and then use things like rounded corners for those browsers that support it.

That's exactly my line of thought.

As long as CSS3 properties like rounded corners, etc. don't really break the site across various browsers, they should be fine. Trying to get the site to look exactly the same in every browser is a hassle that's not worth it. It still functions the same.

vangogh
05-30-2010, 04:06 PM
Which is the whole point of progressive enhancement. Designers and developers are realizing that a site doesn't need to look the same across browsers. It needs to work across browsers, but it's perfectly fine if it looks different in each.

AmyAllen
11-07-2010, 08:57 PM
Dude. Internet Explorer... .Just ugh. It seems like there are a thousand things that work in every browser except IE. Why can't Microsoft keep up with everybody else? I hate that IE is so popular. I almost wish there weren't work-arounds. Maybe if we (web design community) stopped going so far out of our way to accommodate IE, the public would be as frustrated as we are and quit using it. *sigh... A girl can dream.

vangogh
11-08-2010, 12:31 PM
I hear you. On the bright side IE9 looks like it's going to be on par with all other browsers when it's out. Unfortunately not everyone will update right away so we'll still be dealing with older versions for awhile. I just looked at my own stats and of those people using IE to visit my site, 73 percent are using IE8, which makes me think it won't take my audience too long to update to IE9 when they can. Of course given my site mu audience is probably more tech savvy than general so your results may vary.

Then again about 6+ percent of my audience still uses IE6 so not everyone can or will update. Just know the situation with IE is getting better.

AmyAllen
11-08-2010, 11:35 PM
Thanks for that small ray of hope... If only IE would do the automatic updates like Firefox! I am all for forcing users to embrace the future! :P

EDIT: UGH! IE strikes again!! I just got my Facebook page all customized and looking good. Looks awesome in everything except IE - which did bizarre things to my alignment. Blech. Microsoft - I hope you see this! You are keeping me up late at my computer another night!

Spider
11-08-2010, 11:48 PM
Just because I am finding this conversation one sided, I shall put in my uninvited opinion. I like Internet Explorer - I find it far superior to any other internet browser I have tried, both in coding for it and in using it. You code for the other browsers and it gets messed up when you view your work in IE. I code for IE and my work gets messed up by the other browsers. I am as equally critical of the other browsers as you are of IE.

Same khaki pants!

vangogh
11-09-2010, 01:37 AM
Frederick I code to standards and usually go back and forth testing in Safari and Firefox. Almost never do I have to change a line of code later to fix something in IE. The problems you're seeing have less to do with the browsers and more to do with your own coding skills. Think about what you said by the way. You write code that works in the other browsers and it only has problems when you look at it in IE. Why is it the other browsers that's at fault? Isn't it more logical that the problem is IE.

If you code something that works in several browsers and fails to work in one, which is most likely the browser not dealing with the code properly. The ones that are rendering it correctly or the one that isn't.

Spider
11-09-2010, 08:28 AM
...Think about what you said by the way. You write code that works in the other browsers and it only has problems when you look at it in IE. Why is it the other browsers that's at fault? Isn't it more logical that the problem is IE.
..If you code something that works in several browsers and fails to work in one, which is most likely the browser not dealing with the code properly. The ones that are rendering it correctly or the one that isn't.It was Amy that said she writes code that works in the other browsers and only has problems when she looks at it in IE. I said the reverse. Actually, I don't find a big problem in this regard - when I write and look at the result in IE and then look at the result I get in Safari and Firefox, I get what I wanted from IE, what S.and FF give me is usually what I want, only occasionally is it different. But then, sometimes I look at what I wrote in IE and it's not what I expected, either - so I adjust.

Perhaps the problem is going too far without checking. One might be constantly checking how one's code looks in Safari and only occasionally checking how it looks in other browsers. I call that "writing for Safari." When one checks infrequently, one is bound to get larger discrepancies. If cross-browser compatability is especially important to you, check all of them often.

I prefer IE. I like how it works. I use it personally to surf the web, because I don't like Safari or Firefox quite so much. And - and this is the important part for me - a vast majority of my website visitors use IE. If my visitors used some other browser, I would switch and use that browser and write for that browser. There really isn't that much difference between them, I find. Just little things that one can easily get used to with regular use.

I just wanted to bring some balance to what was becoming an anti-Microsoft thread. For me, Microsoft is a great company. Any company that can claim to have created more millionaires than any other company in the history of business, is doing something right.

vangogh
11-09-2010, 11:55 AM
Oh got'cha. Checking frequently is generally good. I don't check as often now, but mainly because I've been developing pages and site so long I know where most of the problems will occur for me and can prevent them in advance now.

To me the basic idea is that there's a standards body saying all browsers should render certain code in a certain way. Before the standards (w3.org) browsers did whatever they wanted and it was difficult to develop for any of them. Browsers makers added their own proprietary features thinking we'd develop for their features, but the reality was most developed for the least common denominator.

Most modern browsers adhere to the standards. IE has always lagged, but they've been catching up with each release since version 7. IE9 looks like it will be on board with most things and I think it's going to be a great thing for web development since a lot of cool and useful parts of css3 will come into common use.

Years ago I would have told you IE was a horrible browser. I haven't though that for years though. They really have been catching up and for the most part it's not too hard to develop a site that works well in all browsers. It's been a long time since I had to write more than a few lines of browser specific code directed at IE. Right now IE is just a minor annoyance in the sense that there are some really nice things in css3 that would be great to use, except they don't work yet in IE. There are workarounds, usually via javascript, but that's not ideal to me. IE9 looks like it's going to add support for a lot more of css and come closer to where other browsers are now and I'm looking forward to it.

Now if we could just get all those companies to upgrade from IE6…

AmyAllen
11-10-2010, 11:36 PM
It was Amy that said she writes code that works in the other browsers and only has problems when she looks at it in IE.
I code to W3 standards. This really isn't a preference thing. There are universal standards for HTML/CSS and Internet Explorer has a lot of known problems reading standards-compliant code.

From an article on IE display bugs:

It's a well-known fact that the Internet Explorer (Win) browser has a wide variety of display bugs. While it may seem satisfying to badmouth that browser, IE is by far the most popular browser on the web, so whining about its drawbacks is not going to help very much.

Sadly, many authors who desire to make the switch to table-less design begin with high hopes, only to have those hopes dashed by what is sometimes known as the "Explorer bug suite." Some of those bugs are not "bugs" at all, but rather misapplications of the W3C standards. Although a full understanding of how IE "gets it wrong" is a full-time job, it is possible to get by with a modicum of bug fixing tools, which is what this article is going to teach you. All ready? Let's go!

Read the rest here. (http://www.communitymx.com/content/article.cfm?cid=C37E0)


I just wanted to bring some balance to what was becoming an anti-Microsoft thread. For me, Microsoft is a great company. I don't have anything against Microsoft - In fact, it's because they're such a well-established company that it is so baffling that their browser has so many issues. Firefox, for example, is open source and has no problem reading standard code. Microsoft should have the best browser - not the worst.


There really isn't that much difference between them, I find. Just little things that one can easily get used to with regular use. There's not a noticeable difference on the user end, because web programmers spend hours writing exceptions into their code, so that people using IE 6,7,8 won't notice a difference.

vangogh
11-11-2010, 01:33 AM
Amy I think Microsoft never thought anything was going to compete with IE so they saw no reason to upgrade IE. At one point 93 percent of people were using one version of IE or another. Once Firefox gained popularity they realized they needed to meet more of the standards. They've definitely lagged, but I think in part it's because the Trident engine under IE was so far off what the standards wanted. I'm I'm not mistaken I think they've rewritten a lot of the underlying engine for IE9 and from most of what I've seen they have caught up a lot.

From IE7 and up they have been getting better. With each version I've had to write less IE-specific code. I think it'll be great when they catch up with most of the standards other browsers already adhere to so they become more common. There's a lot of good css3 on the horizon and still a few css2.1 things that would make websites better.

Spider
11-11-2010, 12:34 PM
Note, too, I think I'm correct in saying that MSIE pre-dated any common standards. MSIE was the standard. Clearly, the other browser makers -principally Netscape, but also Apple - who were losing in the marketplace, wanted to create some standards as different from MSIE as possible, to give themselves the advantage and take away the advantage Microsoft had by dominance.

The differences we see now are not caused by Microsoft's non-conforming to standard, it's the standards being set so very different to MSIE, which was already in existence and by far the leader. In such a situation, it is only natural that Microsoft would resist. I remember Sun and a few others trying the same tactic over operating systems a good few years ago. They lost that battle and Windows remained supreme. Okay, so Microsoft seems to be giving in a bit over the browsers. You can't win 'em all!

AmyAllen
11-11-2010, 10:48 PM
Clearly, the other browser makers -principally Netscape, but also Apple - who were losing in the marketplace, wanted to create some standards as different from MSIE as possible, to give themselves the advantage and take away the advantage Microsoft had by dominance.


Web standards are set by the World Wide Web Consortium (W3C). Microsoft is actually a member (http://www.w3.org/Consortium/Member/List) of W3C and helps to set the standards.

Again, nothing against Microsoft - just the browser. Also, I think it's worth noting that IE was/is so dominant, not because it is a superior product - but because it is the default browser that goes out with Windows. I feel like IE is just riding the coat-tails of Windows' success.

Anyway - I'll quit beating the dead horse. Like Vangogh said - They're getting better... So here's looking forward to the future.

vangogh
11-12-2010, 01:15 AM
Frederick web standards weren't about competing with Microsoft. What happened was all the browser makers were competing with each other and each would add new proprietary features in the hope that developers would think those features great and develop sites and pages specifically for that browser. That wasn't practical though. You want to develop sites naturally for everyone and not exclude people because they didn't use the right browser. It was a mess trying to code a web page and in the end many people just ignored all the cool features and coded to the least common denominator.

Tim Berners-Lee founded the W3C, the World Wide Web Consortium to be an independent standards body to ensure universal functionality across browsers. The W3C sets the standards. Browsers don't have to follow, but by following they ensure web content looks the same now matter what browser is being used. People like me code to the standards because it makes sense to. Had no standards body emerged the web would be a different place and not for the better. You'd probably find that depending on what browser you used certain parts of the web were essentially closed to you.

The reason IE lags behind is early on they had such a large market share that in some respects they did set the standard. Since most everyone was using IE you had to make things work in IE. The problem was IE didn't ever get better. There wasn't much incentive for Microsoft to improve it. Fortunately Mozilla came along, first with the Mozilla browser and later with Firefox. They did build a better browser than IE and people flocked to it. Now we have Safari and Chrome and a host of other lesser known browsers.

Today it's the webkit based browsers that in my opinion are the best as far as rendering web pages. Webkit seems to adopt standards quicker and webkit based browsers are usually the fastest. IE has been getting better ever since it had competition and IE9 looks like it's going to mostly catch up with everyone else.

The difference we see are not the fault of the standards. The differences are due to Microsoft not keeping up. Microsoft still doesn't adhere to some standards that have been in place for a decade. Most industries need a set of standards or it hurts consumers. Think of something as common as batteries. Imagine there was no standards for products that use batteries and every company went their own way. What would happen when the company built a new product with a new battery and dropped support for your product? Standards are often necessary and how browsers render code is one place where it is necessary.

By the way when the W3C was first formed Netscape Navigator was the dominant browser and IE was the smaller player in the market.

Spider
11-12-2010, 11:30 AM
I see. I thought W3C came much later. Interesting history. BTW, wasn't Navigator a Mozilla browser?

vangogh
11-12-2010, 12:04 PM
Netscape wasn't Mozilla, though some or all (?) of the people who originally developed Netscape later founded Mozilla. I think they started with the same basic rendering engine that was in Netscape, but don't hold me to that.

I'm not surprised you thought the W3C came later. They move very slowly on things. For example this thread is about html5. html5 won't become an official spec until 2022 I think. You can use much of it now though. The W3C basically recommends standards. No browser has to follow those standards. One could come along again and gain 95+ percent market share and being creating its own standards. In practice though it doesn't make sense for them to that or for web developers to code to specific proprietary code in a single browser at the exclusion of all other brothers. If you think it's hard to get a site to look the same in IE, FF, Safari, Chrome, Opera, etc today you should have seen it 5 or 10 years ago. It was a mess with browsers all doing things differently. It meant I might have to develop a different site for every browser and naturally I'd have to charge you for all those extra sites.

Spider
11-13-2010, 11:20 AM
I wondered what I was thinking of, if Netscape Navigator was not a Mozilla browser. A visit to Wikipedia reminded me that I was thinking of Mosaic - Navigator was a Mosaic browser.

But look what I also found in the same article -- During development, the Netscape browser was known by the code name Mozilla, which became the name of a Godzilla-like cartoon dragon mascot used prominently on the company's web site. The Mozilla name was also used as the User-Agent in HTTP requests by the browser. Other web browsers claimed to be compatible with Netscape's extensions to HTML, and therefore used the same name in their User-Agent identifiers so that web servers would send them the same pages as were sent to Netscape browsers. Mozilla is now a generic name for matters related to the open source successor to Netscape Communicator.

Thought you'd be interested.

vangogh
11-14-2010, 11:30 PM
Yep, Mosaic was the first graphical browser if I'm not mistaken. The people who developed it did later form Mozilla and created Firefox so while they aren't the same they are tied together in many ways.

Thanks for the extra information. If you're interested I found this bit of history about the early days of browsers and standards (http://diveintohtml5.org/past.html). It's part of a book online about html5, but the part I linked to looked back at how something like the img tag found its way into html. It'll give you a good feel for what it was like in the early days of browsers and how the standards came about.

Spider
11-15-2010, 09:37 AM
Very interesting, VG. All that talk was 1993. I created my first website in 1996. Sure, three years in internet terms is a millenium, and much was achieved in those three years, but it feels strange to have been part of this so early and be so far behind now!

vangogh
11-15-2010, 11:07 AM
I thought the email conversation in the article was interesting and the dates do place us at the start of the history of the Internet. :)

Mosaic while no longer with us was a big part of what we have now. Until then web pages were simply text. They existed mainly so people at different universities could quickly share information with each other and browsers were also text. These first conversations about images weren't envisioning what we have now. I think they were more concerned with being able to add charts and diagrams to research papers.