The main topic of the past month was about the Canvas element of HTML5.
In the aim of improving web user experience, I hope canvas to be able to take the place of classic HTML controls, for two reasons:
- First, drawing on canvas will not be limited by those rules of styles of HTML classic controls. For example, all those controllers are rectangles, which has been messing designers’ head for years! How can some part of the page wanted to be a curve or eclipse while all the controllers are damn rectangles! The only thing can be done, is using image backgrounds to satisfy the visual effect. But even in that way, it doesn’t solve the problem in interactions with the page at all! Say someone wants a eclipse button, fine, he put a eclipse background in a rectangle container, (don’t use img controllers directly as buttons, that’s terrible) and he also wants the outside background to be interactive with the mouse movement. When everything’s done, let’s roll the test. What we get is: as soon as the mouse moves into the rectangle container, the button border, not even close to the eclipse shape, the button is activated; the button is just a rectangle no matter what a silly shape it looks like! This frustrating performance makes so many font-page designers changed to Flash for better effects. Well, well, well, Flash! I’ve talked about this before. It’s just a plug-in, running individually, has less integration with browsers, which means it might just break down itself while everything else on the page doing all right. And Flash doesn’t develop with browsers, so it might drag the browser down while handling over duties. However, all these won’t happen on Canvas; it’s HTML5 standard, visualization can be specific to pixels, and it also supports tracking the mouse position.
- Second, using Canvas can effectively protect the template design. Since Canvas won’t show anything, no matter shapes or colors, it includes in the HTML code, if other people want to copy your design, they have to do it themselves, like holding a cake in hand thinking how to re-make it. And if the code used to draw the interface is hide carefully, say it is directly received from an authorized server request rather than written in a script file, it will be better protecting the work.
So I started doing some experiments with Canvas. I thought maybe I can try using Canvas to paint a regular webpage instead of showing real controls.
http://javascript.lab.d-origin.com/tests/html_painter/
This is how far I got. I wasn’t thinking about the variety of style attributes of different html controllers because once I start using customized abstract controls, it doesn’t matter at all. So I only put DIV controls in the source document, and the painter will analyze the relationship between elements in the source document, and paint the document in the right order.
The current procedure is the following:
- fetch all document elements
- generate a list according to the elements’ relationship, from bottom to top
- read the first element in the list
- resize the cache canvas to the size of the element
- draw the element
- fill in the background color (if applicable)
- draw the border (if applicable)
- clip the shape (radius style and etc.)
- sketch the text content (if applicable)
- duplicate the image to the buffer canvas at the right offset
- read the next element in the list, repeat step 4 – 6 till the end of the list
- clear the main canvas
- dump the image of the buffer canvas to the main canvas
These steps only finish refreshing a single frame. Then I use a individual loop to make a 60 fps refreshing rate (this number is randomly picked, 30 is also fine) and take care of the duty pressure to the browser. Every single loop the execution time will be recorded and the refreshing rate will vary accordingly.
However, there are two main issues with this procedure:
- in step 4, there is an document element attribute operation, which usually takes much more time than calculation and drawing
- it seems any transparency of the image will lost when being duplicated
I’m looking for solutions. To the first problem, I can try modify the drawing procedure to avoid using a cache canvas. But still no idea about the second one.