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

Canvas Bevel Script

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…

Posted by Dion Almaer at 6:59 am
7 Comments

++++-
4.2 rating from 56 votes

Wednesday, December 5th, 2007

Plotting in jQuery

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…

Posted by Rey Bango at 8:30 am
21 Comments

++++-
4.6 rating from 201 votes

Tuesday, November 27th, 2007

Firefox Canvas 3D Extension Available

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…

Posted by Dion Almaer at 7:31 am
10 Comments

+++--
3.5 rating from 32 votes

Tuesday, November 20th, 2007

Mocha UI – MooTools Canvas UI class

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…

Posted by Rey Bango at 11:02 am
19 Comments

+++--
3.3 rating from 183 votes

Saturday, November 17th, 2007

3D Canvas in Opera

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…

Posted by Dion Almaer at 5:51 am
12 Comments

++++-
4.4 rating from 25 votes

Wednesday, October 10th, 2007

The JavaScript Hyperbolic Browser

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…

Posted by Dion Almaer at 8:40 am
15 Comments

+++--
3.4 rating from 29 votes

Tuesday, October 9th, 2007

CVI Lab: A showcase for canvas effects

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…

Posted by Dion Almaer at 6:50 am
10 Comments

++++-
4.2 rating from 42 votes

Tuesday, September 18th, 2007

Curl.js: Curl your images

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…

Posted by Dion Almaer at 11:26 am
11 Comments

++++-
4.2 rating from 63 votes

Monday, August 27th, 2007

Reflex: Cover flow for your soul

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…

Posted by Dion Almaer at 8:35 am
7 Comments

++++-
4.2 rating from 83 votes

Friday, August 3rd, 2007

Edge.js: Mask your images with unobtrusive JavaScript

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: < View plain text > javascript <script type="text/javascript"> var mask2load = new Array(); mask2load[0] = "masks/8bit/crippleedge.png"; mask2load[1] = Read the rest…

Posted by Dion Almaer at 8:20 am
3 Comments

++++-
4.2 rating from 63 votes

Tuesday, July 31st, 2007

Timeplot: Canvas-based Specialized Charting Tool

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…

Posted by Ben Galbraith at 9:00 am
13 Comments

++---
2.1 rating from 294 votes

Friday, June 15th, 2007

Instant: The polaroid of Ajax

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…

Posted by Dion Almaer at 8:30 am
20 Comments

++++-
4.3 rating from 69 votes

Tuesday, May 8th, 2007

New Explorer Canvas Release

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.

Posted by Dion Almaer at 12:22 am
4 Comments

++++-
4.1 rating from 34 votes

Tuesday, May 1st, 2007

Loupe.js: Magnifier Component

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: < View plain text > HTML <div> <img id="…" onLoad="initLoupe(this.id);" src="…" width="356" height="205" alt="…"/> </div>

Posted by Dion Almaer at 8:00 am
11 Comments

++++-
4.4 rating from 97 votes

Thursday, April 19th, 2007

Canvas Corner 1.0

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: < View plain Read the rest…

Posted by Dion Almaer at 8:27 am
28 Comments

++++-
4.4 rating from 94 votes

Tuesday, April 10th, 2007

Emprise JavaScript Charting with Canvas

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.

Posted by Dion Almaer at 6:11 am
17 Comments

++++-
4.2 rating from 54 votes