What about creating the whole website within a CANVAS?

Question

I am designing a new website from scratch and wondered what cons could have in developing the whole site within a <canvas> element.

I am aware of compatibility issues with IE6/7/8 but that's not important for this project. But I do care, for example, the Google search engine behavior and mobile compatibility.

The main reason why I chose this way is to have the possibility to code advanced effects and animations over elements and pictures which are not possible with pure HTML5/CSS.

Aitch

Maybe put your text content which is relevant to search engines over the canvas as regular html and the design you draw on canvas? I mean, of course you don't want to make visual effects on the text anyway because nobody would read that. But you'd probably run into too much trouble trying to reinvent the wheel for say, making a fluid/elastic layout? – Riesling

Exactly, you get my point. The first idea was to create a floating HTML over a huge CANVAS, once there I could code some background effects and even duplicate any HTML element and animate it outside CSS3/JS limitations. – Aitch

Answer 1

Canvas is an element for raster graphics. It's good for parts of the page, but not for whole page. Page is document. It needs to be machine readable too. If your whole website consists of canvas, then search engine bots, screen readers, browsers plugins, and other bits of software won't be able to access it. Creating a website with canvas is like preparing a document with paint program instead of word processor. It's possible but not practical. Could be a good idea for an experiment, but if you are doing this for production, then you should re-consider.

Flump

So would it be advisable to use canvas element entirely for a "web app" instead of a "website" given that search engine bots would not be reading that. – Sahaptin

Yes, lots of web apps are output to a canvas element to display data – Wiatt

Answer 2

My own website is a single Canvas and a single big Javascript (from Typescript), so yes it is feasible and it autoscales to be viewed on a mobile phone, also auto-rotating...

If you are interested : www.erroba.be (acronym of my name Erlend Robaye)

I'm sure you could view the source and get some ideas.

Druci

Answer 3

This is just like creating a website using WebGL! We use them for a better visual experience, but they are not usable for screen readers and crawlers. to fix this issue, we can create content for specific devices and hide them on others.

Secondbest