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.


Monday, June 30th, 2008

ShiftZoom: Zoomify your oversize images

Category: Canvas, JavaScript, Library

ShiftZoom 1.0 is the latest tool from Christian Effenberger that allows you to add zoom and pan functionality to oversized images on your webpages. It uses unobtrusive javascript to keep your code clean. Requires no plugin/extension or any other external resource! It works in all the major browsers – Mozilla Firefox 1.5+, Opera 9+, IE Read the rest…

Posted by Dion Almaer at 11:15 am
12 Comments

++++-
4 rating from 79 votes

Tuesday, June 24th, 2008

Rendering performance in Canvas compared to SVG and VML

Category: Canvas, Performance

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

Posted by Dion Almaer at 8:59 am
12 Comments

+++--
3.7 rating from 31 votes

Monday, June 23rd, 2008

Photo Collages with Canvas

Category: Canvas

Ernest Delgado is having fun experimenting with canvas. He has posted on one of his tests which involved creating a photo-table-like system. You can visit the demo that allows you to work with some photos and export them out. You can play with adding borders, show corners for rotation, all on the fly. It is Read the rest…

Posted by Dion Almaer at 7:49 am
9 Comments

++++-
4.3 rating from 38 votes

Thursday, June 19th, 2008

Algorithm Ink: Algorithm-driven Painting with Sharing and On-line Editing

Category: Canvas, JavaScript

Posted by Dion Almaer at 7:52 am
Comment here

+++--
3.3 rating from 11 votes

Wednesday, June 18th, 2008

Hypno trip down the fractal rug

Category: Canvas, JavaScript

What a great title. It is an entry in the JavaScript 20 liners call out: < View plain text > javascript //  chain( func ) //  make func chainable by making it return itsReturnValue||this function chain( func ) {     return function()     {         return func.apply( this, arguments )||this; Read the rest…

Posted by Dion Almaer at 6:32 am
7 Comments

++++-
4.4 rating from 37 votes

Friday, May 9th, 2008

Processing.js: Port of the Processing language to JavaScript and Canvas

Category: Canvas, JavaScript

John Resig has completed 7 months of work to produce a port of Processing, the “programming language and integrated development environment (IDE) built for the electronic arts and visual design communities”, which aims to teach the basics of computer programming in a visual context, and to serve as the foundation for electronic sketchbooks. One of Read the rest…

Posted by Dion Almaer at 12:54 am
11 Comments

++++-
4.5 rating from 44 votes

Monday, May 5th, 2008

Compression using Canvas and PNG

Category: Canvas, JavaScript

The image above is the 124 kilobyte Prototype library embedded in a 30 kilobyte 8 bit PNG image file. Jacob Seidelin had some fun this weekend it appears and created a script that can read in JavaScript code from images. To do this, he used the canvas getImageData() method. Here are the detailed steps: The Read the rest…

Posted by Dion Almaer at 10:28 am
20 Comments

++++-
4.6 rating from 40 votes

Thursday, April 24th, 2008

Using canvas to test your site with colorblind folk

Category: Accessibility, Canvas, Library

The picture above is showing you how someone with the color blindness trait Tritanopia would see the image. Michael Deal first created the Color Matrix Library, which supports a large portion of the most common color functions available, including: Hue, Saturation, Brightness, Contrast, Exposure, Temperature, Tint, Channels, Blindness, Colorize, Threshold, and Invert Michael then created Read the rest…

Posted by Dion Almaer at 1:35 pm
4 Comments

++++-
4.3 rating from 30 votes

Wednesday, April 16th, 2008

Busy.js: Loading indicators with Canvas

Category: Canvas, JavaScript, Library

Christian Effenberger is back with some more canvasy goodness. He has released Busy.js, a library that allows you to add/remove loading indicators to html elements on your webpages (inc. overlay color & transparency). It uses unobtrusive javascript to keep your code clean. Requires no plugin/extension or any other external resource. Usage < View plain text Read the rest…

Posted by Dion Almaer at 9:13 am
5 Comments

++++-
4 rating from 48 votes

Wednesday, April 9th, 2008

Canvas2Image: Save out your canvas data to images

Category: Canvas, JavaScript, Library

More from Jacob Seidelin. He has created Canvas2Image, a library that takes <canvas> data and makes an image out of it. This means that you can create canvas images on the fly and then: < View plain text > javascript var strDataURI = oCanvas.toDataURL();   // returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt…" See the full API in use here: Read the rest…

Posted by Dion Almaer at 10:00 am
9 Comments

+++++
16889 rating from 61 votes

Super Mario; 14KB of JavaScript

Category: Canvas, Fun, Games, JavaScript

Jacob Seidelin is doing great work, and for something fun, he build a piece of Super Mario in just 14KB of JavaScript: Here’s an experiment in keepings things small and confined to one Javascript file. There are no external image files or anything, everything is rendered with Javascript using either canvas elements or old fashioned Read the rest…

Posted by Dion Almaer at 12:39 am
15 Comments

+++++
2.5160689200723E+48 rating from 127 votes

Monday, March 17th, 2008

cvi_text_lib: cross API text stroking

Category: Canvas, JavaScript, Library

Christian Effenberger, or Mr. Canvas as we think of him, has come back from a data recovery nightmare with a new library, cvi_text_lib, that supports stroke text capability for Canvas & VML. It uses unobtrusive javascript to keep the code clean and it works in all the major browsers – Mozilla Firefox 1.5+, Opera 9+, Read the rest…

Posted by Dion Almaer at 7:28 am
5 Comments

++++-
4.6 rating from 36 votes

Tuesday, February 26th, 2008

Canvas Polar Clock

Category: Articles, Canvas, JavaScript, Prototype

“agrath” has developed a very nice Canvas example using Prototype that makes use of a common Prototype-isms: Object.extend, Class.create, bind, enumerables, $w, $. The Polar Clock is a different visualization of time and the example walks through all of the work required to implement it using Prototype 1.6.0.2 and Canvas, including the draw method: < Read the rest…

Posted by Dion Almaer at 6:31 am
4 Comments

+++--
3.6 rating from 23 votes

Tuesday, February 5th, 2008

Canvas Pie Chart from datatable

Category: Canvas, Unobtrusive JS

I love it when a plan comes together (removes cigar): After I played with Google charts and porting the idea of generating charts from accessible table data over to YUI charts Stoyan Stevanof had to use the same idea to generate his own, home-made Canvas-driven charts: His solution shows in a few lines not only Read the rest…

Posted by Chris Heilmann at 1:24 pm
2 Comments

+++--
3.5 rating from 29 votes

Thursday, December 20th, 2007

Mapper.js 1.0: Highlighting for imagemaps

Category: Canvas, JavaScript, Library

Christian Effenberger has doubled up to release Mapper.js 1.0, a library that allows you to add automatic area highlighting to image maps on webpages. It uses unobtrusive javascript to keep the code clean. It works in all the major browsers – Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it can use Read the rest…

Posted by Dion Almaer at 1:15 am
12 Comments

++++-
4.4 rating from 64 votes

Monday, December 17th, 2007

WireIt: Yahoo! Pipes Canvas Wiring API

Category: Canvas, JavaScript, Library, UI, Widgets, Yahoo!

Eric Abouaf has released WireIt, a library that answers the though: “wow, I wish there was an API that did the UI bits that Yahoo! Pipes does.” WireIt uses canvas, excanvas for IE, and YUI to get the job done. Take a look at the docs to see how it works. Here is the code Read the rest…

Posted by Dion Almaer at 9:00 am
Comment here

+++--
3.8 rating from 41 votes