Question

I had this grand scheme to make this cool website with all these bells and whistles, and I decided to use HTML canvas b/c it offers so much flexibility. However, as time wore on, I began to realize that I was just reinventing the wheel, for example manually implementing or integrating:

1. Mouse/Keyboard events
2. User (text) input
3. Simple Animations (ie. fade)
4. Buttons, drop down menus

The first one, especially makes one realize how much we take for granted things like onmouseover. I understand what the canvas is for –loosely collected under the umbrella of pixel manipulation– so I guess to cut this rant short, my question is this: Does anyone else think the canvas does not integrate well with all the other godly goodness of HTML5? Off the top of my head, here are two basic things that would be neat to embed in the canvas (please feel free to correct me if they are already included)

1. Embedding of other websites: For example, If I have a star shape, I want to connect its onlcick function to load a web page, then use the context.beginPath and context.clip functions to make the star ‘hollow’ so the web site is visible inside the star. This is attainable in the canvas by putting the canvas over the html page (inside a floating frame) and having a transparent background, but what if I want, for example, a grid of 10×10 stars all with their own web site? What if I want to scale the size of each web page?
2. Non rectangular elements/widgets: One thing I tried to tackle with was a circular text editor. This is attainable with the context.beginPath and context.clip functions, with the textentry or textarea in the background, however, the signals are caught by the canvas, and not relayed through to the visible, but nonetheless underlying, textarea or textentry element. It is technically possible to catch each signal, assess it, generate new signals from it, and pass it onto the desired target, but I could not get it to work at all. It would be very useful if there was a way to embed html elements into a canvas shape. [edit] Also, I forgot to mention that one can not shape the actual canvas element. For example if you draw a circle in the middle of the window, the canvas is still a rectangle, and the areas outside of the circle will still occlude underlying content and/or capture user generated events

Answer 1

No, i don’t think canvas does not integrate well witch all the other godly goodness of HTML5 (whatever that is)

1. Embedding of other websites… Or i’m not getting your point or this is really a very very strange feature to want.

2. Circular text editor? Embedding HTML Elements inside Canvas?? I’m losing you here…

I suggest you to read the Canvas specs and to look into some libraries like EaselJS