sorted by: recent | see : popular

Content Tagged with canvas + page

Ernest Delgado put together work from an earlier project, and the realization that textareas are native drop targets, to create Drag and Drop without Drag and Drop.

Something that I never realized before is that text areas are drop targets by default. Using this property alone (without registering drag events on the source elements), we can emulate drag and drop behavior of non-linked images between different documents.

Put together the layers, with canvas, and a hidden transparent text area, and you get the following architecture:

Then, check out the demo that allows you to drag between gadgets. Take images from the right hand magnet, and paste them onto the fridge!

As part of the Open Web Advocacy work I've started with Dion and others at Google, one of my goals right now is to help increase awareness and support around doing 2-D/vector graphics on the open web. This includes tools such as the Canvas tag, SVG (Scalable Vector Graphics, an XML markup language for vector graphics), and open source cross-browser drawing toolkits such as Dojo GFX, ExplorerCanvas, and Raphael.

One of the big reasons for this is that 2-D drawing/vector graphics is the top requested feature by double the amount of other feature requests in the recent Open Ajax Alliance Browser Feature Wish List vote-off. As part of this effort I'm doing a bootcamp right now to come up to speed on the latest developments in both Canvas and SVG. I've been using Shelley Powers excellent Painting the Web book to find out the state of vector graphics on the web in 2008. During this education I've run across two interesting things.

First, I wanted to know what the status of SVG support is across the different browsers. I found Jeff Schiller's very complete SVG Test Suite results that are actively kept up to date:

SVG 1.1 became a W3C recommendation on January 13, 2003. Five years later, this page records my results of running various SVG implementations (web browsers and browser plugins) through the official SVG Test Suite. Last updated 2008-06-18.

A screenshot with some of the results:

SVG Test Results Against Browsers for SVG 1.1

Things are pretty good with Firefox 3, Safari 3, and the winner, Opera. There is a strong subset of SVG that can be used cross-browser with these. Of course, Internet Explorer is the limiting factor here, with a grand score of 0% for all tests:

Internet Explorer SVG Support

This means that for open web vector graphics to be realistic we need some kind of shim for Internet Explorer (Adobe used to have a browser plugin for IE that had very high quality, but its quite large and was end of lifed in 2007). Internet Explorer actually has an earlier vector graphics standard named VML (Vector Markup Language) that can be used to 'trick' it into having 2-D graphics support that is used by a number of open source toolkits. However, VML can run into some performance issues when you start to get into a large number of nodes and animation with the available open source drawing toolkits.

One natural avenue is to emulate SVG or other 2-D graphics on Internet Explorer using Flash. I had always heard about this possibility but recently found a small company actually doing it to good effect. They have not finished yet, but their demo is impressive:

SVG Render Using Flash

Here we are viewing the source of the SVG being rendered by this Flash:

SVG Renderer in Flash (View Source)

I emailed the developers to get some more information on this Flash-based renderer and they responded:

Our SVG viewer and editor is not open source. It will be part of the new InputDraw version and with some more features - like draw recognition - will be part of the new Comics Sketch site, so users can create advanced comics strips.

We are part of a small company in Lisbon, Portugal named inEvo that works with a lot of web development, rich interfaces and other areas like computer graphics and artificial intelligence.

While I respect the hard work it took inEvo to create this and their need to charge for it, it looks like using Flash to emulate SVG is a valid approach for Internet Explorer and it would be great to have something similar available open source. Just the basic viewer being available would make sense as open source and would probably even drive more business to them for their higher level tools; it looks like inEvo has created lots of cool things above this that make sense as being commercial-only, such as an SVG editor, drawing recognition, social comics creation and sharing site, etc.

Robert O'Callahan and Dave Hyatt have been chatting about paint servers as Robert creates SVG ones and then arbitary elements.

This continues the meme of taking common use cases and making them easy via CSS (e.g. reflections).

Here is the SVG version:

And here for canvas:

Exciting!

Just after I posted about Ernest's canvas experiment with photos he put something else up that tests the performance of rendering polygons with Canvas compared to other techniques.

The demo lets you run a live test, and view saved tests, comparing the Google Maps interface, which "currently draws polygons using VML for Internet Explorer, SVG for Firefox and image retrieval for Safari and Firefox linux."

At first the results were surprising. The canvas version was magnitudes faster. However, then they worked out that the live Google Maps version is actually doing a lot more than just drawing the polygons, that being said, a commenter had a valid point:

If we analyze the rendering time of the markup alone, both SVG and VML are not necessarily slower than canvas and canvas+excanvas.js. So the difference in performance is due to the implementation of polygons before the markup is output which the canvas implementation is skipping.

That doesn't make the experiment invalid. You didn't show that Canvas is faster than SVG or VML.
But you did show that it's possible to get much better polygon performance than the current API using a more direct to the metal approach - with whatever rendering engine. And people are crying out for faster polygons.

John Resig linked to Aza Raskin's Algorithm Ink which is an implementation of the Context Free Art project in JavaScript using Canvas.

You can draw immediately with clicks, browse other art, and save your work. You can also edit the code to tweak it:

startshape scale
	
rule scale{
	SPIKES{ s .03 }
}
	
rule SPIKES {
	SPIKE {}
	SPIKE { r 90 }
	SPIKE { r 180 }
	SPIKE { r 270 }
}
	
rule SPIKE {
	LSPIKE {}
}
rule SPIKE {
	LSPIKE { flip 90 }
}
	
rule LSPIKE {
	SQUARE {}
	LSPIKE { y 0.98 s 0.99 r 1}
}
rule LSPIKE 0.005 {
	SPIKE { r 90 }
	SPIKE { r -90 }
	LSPIKE { y 0.98 s 0.99  r 1}
}
	
rule MOUSECLICK{
  SPIKES{ s .025 }
}

When I kicked it off in WebKit nightly, I got a nice "you aren't using a standards compliant browser" message, but it seemed to work fine ;)