Canvas
Canvas is an element of HTML5 that allows for dynamic, scriptable rendering of 2D shapes and bitmap images that is currently supported by Mozilla Firefox, Google Chrome, Safari and Opera.
Friday, December 14th, 2007
Category: Canvas
, Component
The champion of unobtrusive canvas, Christian Effenberger, has come out with a new microformat script that enables you to add bevels to your images (and also shading, shining and glowing). Why would you want to do this via canvas? Fast and easy to implement. Just add class=”bevel” to the image and your good to go Read the rest…
Wednesday, December 5th, 2007
Category: Canvas
, jQuery
Drawing on inspiration from Plotr and PlotKit, software developer Ole Laursen wanted to bring the same plotting functionality to jQuery. So he built his own jQuery plugin and called it Flot. While a bit oddly named, the first release of Flot, v0.1, already provides some impressive capabilities: The project actually got started because we were Read the rest…
4.7 rating from 196 votes
Tuesday, November 27th, 2007
Category: Canvas
, Firefox
When Ben and I gave our latest State of Ajax talk we wanted to show off Canvas 3D. We saw the “moz-gles11″ context for Firefox 3, but at the time you had to build that bad boy from source. Riiight. Now the game has changed. Vladamir has detailed Canvas 3D in Firefox and has created Read the rest…
Tuesday, November 20th, 2007
Category: Canvas
, MooTools
, UI
In an ongoing exercise to become more familiar with MooTools and Canvas, Greg Houston has created an extension to MooTools called Mocha UI which provides a new UI class made with canvas tag graphics. The new class provides the following set of features: No images. The windows, including their controls, gradients and shadows, are drawn Read the rest…
3.3 rating from 178 votes
Saturday, November 17th, 2007
Category: Canvas
, Opera
Tim Johansson is talking about Opera's support for a 3d Canvas which differs from Mozilla's in that it doesn't map directly to OpenGL, which they did because: It makes it easier to implement on non-OpenGL platforms (such as D3D) We wanted to have some form of collision detection available What can you do? Here is Read the rest...
Wednesday, October 10th, 2007
Category: Canvas
, Examples
, JavaScript
Nicolas Garcia Belmonte has created a JavaScript Hyperbolic Browser. What the frick is a Hyperbolic tree? A Hyperbolic Tree (HT) is a "focus+context" information visualization technique used to display large amount of inter-related data. This technique was originally developed (and patented) at Xerox PARC. Check out a real example, using Pearl Jam as a starting Read the rest...
Tuesday, October 9th, 2007
Category: Canvas
, Showcase
Christian Effenberger has built a lot of unobtrusive canvas-based libraries and thought it would be a good idea to generate a showcase in form of a WYSIWYG application, in order to get a fast impression of theavailable CVI effects and their illustration qualities. The CVI lab is now out there, with just the curl effect Read the rest...
Tuesday, September 18th, 2007
Category: Canvas
, CSS
, JavaScript
, Library
Christian Effenberger has a new effect for you to use. With Curl.js you can add a page curl effect (including backside mask) to images on your web pages. It uses unobtrusive javascript to keep your code clean, and it works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, IE6+ and Safari. On Read the rest...
Monday, August 27th, 2007
Category: Canvas
, JavaScript
Christian Effenberger, Canvas Library Creator Extraordinarie, has created Reflex.js 1.1, which allows you to add a Cover Flow effect (including reflection) to images on your web pages. It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, IE6+ (tilting missing) and Safari. On older browsers, it'll degrade and your visitors won't notice Read the rest...
Friday, August 3rd, 2007
Category: Canvas
, JavaScript
, Library
Christian Effenberger is back with some more Canvas goodness. He has created Edge.js, a library that lets you apply an image mask (in the form of another image) to any image via unobtrusive CSS. You initialize via: PLAIN TEXT JAVASCRIPT: <script type="text/javascript"> var mask2load = new Array(); mask2load[0] = "masks/8bit/crippleedge.png"; mask2load[1] = "masks/8bit/frizzedge.png"; mask2load[2] Read the rest...
Tuesday, July 31st, 2007
Category: Canvas
On July 1st and July 7th, we posted about Timeline from the Simile project. We're pleased to post about another related project: Timeplot, which is a canvas-based ajaxy plotting companion to our Timeline widget (that also supports the same timeline data formats). Follow the link; the screen shot doesn't do it justice. While you're there, Read the rest...
2.1 rating from 293 votes
Friday, June 15th, 2007
Category: Canvas
, JavaScript
, Library
The prolific Christian Effenberger has released another unobtrusive graphics library. This time he has shared Instant, a library that takes your images, and replaces them with tilted polaroid-like versions in-place. Once you include the JavaScript, you just set a CSS class of instant on an image that you want to polaroid, and optionally tweak the Read the rest...
Tuesday, May 8th, 2007
Category: Canvas
, IE
, JavaScript
, Library
Erik Arvidsson has released a new version of ExCanvas, the wrapper around VML that implements the canvas tag on IE. This has enabled applications such as Yahoo! Pipes. With Silverlight, maybe a version could be created that wraps the faster silverlight rendering.
Tuesday, May 1st, 2007
Category: Canvas
, Component
, Showcase
Christian Effenberger is having great fun with canvas. His latest incarnation is Loupe.js, which allows you to add a magnifier to an object on your page. All you have to do is tell Loupe where to put it: PLAIN TEXT HTML: <div> <img id="..." onLoad="initLoupe(this.id);" src="..." width="356" height="205" alt="..."/> </div>
Thursday, April 19th, 2007
Category: Canvas
, UI
, Unobtrusive JS
Christian Effenberger was inspired by the reflection code and decided to implement Corner.js. The library uses unobtrusive JavaScript and microformats to allow users to simply add class names to an img tag to render them with corner effects, all via Canvas. If you wanted to add a shaded corner you would say: PLAIN TEXT HTML: Read the rest...
Tuesday, April 10th, 2007
Category: Canvas
, JavaScript
, Library
Jacob Miller and his team have created a rich charting library called EJSChart. EJSChart is canvas-based with many interactive features such as zooming and auto scaling. The product has been in development for some time but the web site has just been established. It features interactivity, axis scaling, zooming, scrolling, ajax-driven data, and much more.