Question

I am trying to create a navigation bar that will sit at the top of my website for all of my pages.

I am much more familiar with the code that the Raphael library uses, and it will be much simpler for me than creating a bunch of tiles and the corresponding JavaScript.

Is there any problem with using a canvas for these sorts of purposes?

Does anyone have a better idea?

Thanks in advance for any advice.

UPDATE: Problems with render speed? Again, I’m totally open to alternate suggestions!

Answer 1

Short answer: Probably not the greatest idea.

Longer Answer: As logical Chimp hinted, using the canvas for a crucial element is certainly a bad idea, as browsers with no javascript support and/or no canvas support (including web spiders, and browsers that are for various perceptual differences (blindness, etc)) would see nothing. (for people, this means they won’t find your sub pages. For web spiders (Google, etc.) this means no one would ever find your sub pages.)

If you want to use Raphael or another canvas based solution, for accessibility you should start with an html based navigation element (like ul li in a div as has been done for years), and then you’ll replace that via javascript when the page loads (see HTML5 Canvas replace to <div> for an example of how to do this (includes a jsfiddle link)

The reason it’s not the greatest idea is that you’ll need to ensure that you keep your html nav element in sync with your canvas based one – although I guess if it’s being generated by a server side process (e.g. wordpress) it’s not too much more work to build the html nav element, and then you only need to test it regularly to ensure it’s working.