Welcome to the preview of Sketchpad. Though not all browsers support <canvas> we’re working hard to extend support before our official release. Until then, you lucky FireFox users (download Firefox) will be able to kick the tires and hold the wheel of what we believe will become the new standard in Web-authoring.
Sketchpad uses the little-known <canvas> tag to provide users and publishers with full control over the presentational qualities of their work. Directly accessing vector graphics, the <canvas> tag gives publishers real-access to their users’ display. The <canvas> tag will be available in HTML 5.0. In the meantime, we’re working to extend support to Internet Explorer, and working on compatibilty with Safari/WebKit’s javascript layers.
In the late 90’s, Macromedia released flash 7.0, using Actionscript. This allowed web developers to incorporate advanced graphics and programming into their website. Unfortunately, flash files are difficult to edit and require browser-side plugins. This proprietary format has never-the-less, received wide acclaim and usage over the years. Canvas is something new. With canvas, programming is handled in plain Javascript. Developers and users are given a simple way to manage their interactive programs. Further, canvas is a simple vector programming interface. Whether you’re using a mobile phone or a wide screen display, your Canvas webpages are guarenteed to be crisp, clear and responsive.
Hi nice sketchpad you did there. I wonder if you have been updating the code since 2008 or if you have just left it like it is since then. It looks and feels really great.
I just wanted to throw another question. Why do you use 5 canvas elements on top on each other with absolut and z-index position.
Thanks.
Ingvi
@Ingvi Thanks 🙂 Yup, development on it stopped in 2008. I’ve worked on some “sketch” features over the years, and at some time will create an update to the application. To answer your question, these are the five canvases:
1) Drawing area
2) Active area (for creating shapes, things where the canvas must be cleared each frame).
3) Marquee layer (which goes on top of the active area)
4) Mouse layer, was not used for this app, but there were some beta features for editing shapes, and instead of using “isPointInPath” which was not standard at the time, I used a pixel layer where colors represented events, and used “getImageData(x,y,1,1,).data” to get the identifier of the point.
5) Temporary layer is used to stylize brushes, and stamps (hidden layer, basically a “cache”).
Best,Michael