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, December 28th, 2009

TransM: Programmable Image Transitions

Category: Canvas, JavaScript, Library

The infamous Christian Effenberger has a new library to share: TransM.js 1.0 allows you to add programmable image transitions to your webpages. Features 113 transitions, 32 tweenings, individual corners, overlay graphics and event actions. Requires no plugin/extension or any other external resource! It uses unobtrusive javascript to keep your code clean. You can play around Read the rest…

Posted by Dion Almaer at 6:38 am
3 Comments

++++-
4.3 rating from 33 votes

Friday, December 4th, 2009

Fun Friday Particle System

Category: Canvas

I think we first featured Mr Speaker when we showed his fun Friday platformer game. This Friday we have a canvas based particle system that is very visual. Check it out.

Posted by Dion Almaer at 12:39 am
8 Comments

++++-
4.2 rating from 31 votes

Wednesday, November 25th, 2009

Javascript JPEG Encoding

Category: Canvas

Andreas Ritter has managed to encode JPEGs in Javascript. This blog post explains how he did it, shows some benchmarks, and provides a demo and a downloadable library so you can play along at home. It was surprising that it was that easy to get the first js-encoded jpeg displayed in the browser. Of course Read the rest…

Posted by Michael Mahemoff at 1:15 pm
15 Comments

++++-
4.2 rating from 50 votes

Thursday, October 22nd, 2009

Microsoft to help move Canvas 2D API out of HTML5 spec?

Category: Canvas, Microsoft

Eliot Graff of Microsoft wrote to public-html@w3.org: In his mail describing why he created a separate Canvas 2D API specification, Doug Schepers wrote [1]: > There is a chance that currently Canvas could be a blocker on progress > for the HTML5 spec, and at this point, Canvas is so widely implemented > that I Read the rest…

Posted by Dion Almaer at 12:32 am
30 Comments

++---
2.9 rating from 47 votes

Thursday, October 15th, 2009

HTML5 Canvas FTW!

Category: Canvas, Presentation

Dmitry Baranovskiy, of Raphaël fame (can’t forget the umlauts), has posted an excellent presentation on the Canvas tag from Web Directions South ’09:

Posted by Brad Neuberg at 6:30 am
7 Comments

++---
2.7 rating from 55 votes

Monday, October 12th, 2009

Crazy Times: Rendering HTML…. in Canvas

Category: Canvas, HTML

It’s still early work but James Urquhart has gotten HTML rendering inside the Canvas tag. In his demo, he renders the following HTML into the Canvas element: < View plain text > HTML &lt;html&gt;   &lt;head&gt;     &lt;title&gt;&lt;/title&gt;   &lt;/head&gt;   &lt;body&gt;     &lt;p class="woo" id="render" style="display:none;"&gt;       Rendering &lt;b&gt;HTML&lt;/b&gt;…   Read the rest…

Posted by Brad Neuberg at 6:30 am
20 Comments

++---
2.6 rating from 38 votes

Thursday, October 8th, 2009

Play Kings Quest, Space Quest, and More… Using Canvas Tag

Category: Canvas, Games

Martin Kool and Sjoerd Visscher have gotten many of the old Sierra Online games running on the Canvas tag, including many of the Kings Quest series, Space Quest series, and Leisure Suit Larry. Martin Kool describes some of the long process it took to get these into the shape they are: In 2003, I created Read the rest…

Posted by Brad Neuberg at 6:00 am
10 Comments

+++--
3.9 rating from 44 votes

Monday, October 5th, 2009

toDataURL, Canvas, and SVG

Category: Canvas, SVG

I’m a fan of all the new ways of drawing on the web. I consider myself a Canvas evangelist, an SVG evangelist, and an evangelist for the new CSS Animation work going on. When asked “SVG or Canvas” I’ve long felt the right answer is: “Yes” :) Canvas is great at pixels, SVG is great Read the rest…

Posted by Brad Neuberg at 6:30 am
21 Comments

+++--
3.8 rating from 30 votes

Thursday, October 1st, 2009

ChemDoodle Web Components

Category: Canvas, HTML

Via jzornig comes news of a cool set of components written with HTML 5 and the Canvas tag: ChemDoodle Web Components are pure javascript objects derived from ChemDoodle™ to solve common chemistry related tasks on the web. These components are powerful, fully customizable, easy to implement, and are free under the open source GPL license. Read the rest…

Posted by Brad Neuberg at 6:30 am
1 Comment

+++--
3.8 rating from 22 votes

Monday, September 28th, 2009

Berts Breakdown

Category: Canvas, Fun, Games

We usually post these on Friday, but who says a little fun on Monday is wrong? Paul Brunt has put together a nifty game using the Canvas tag. It’s pretty impressive. He is also using Chrome Frame to have the game work on IE as well. Play it now

Posted by Brad Neuberg at 7:00 am
8 Comments

++++-
4.1 rating from 44 votes

Thursday, September 24th, 2009

Content Aware Image Resizing… in JavaScript

Category: Canvas

Content aware image resizing is a nifty technique where you can make an image smaller by literally understanding the content better and remapping it. Stéphane Roucheray has put together a fancy demo (Firefox 3.5 only) that uses JavaScript and the Canvas tag plus createImageData to do all of this in the browser versus C++: For Read the rest…

Posted by Brad Neuberg at 1:30 pm
6 Comments

++++-
4.4 rating from 44 votes

Wednesday, August 26th, 2009

Canvas via Silverlight again

Category: Canvas

The infamous excanvas has had a Silverlight bridge for some time. It is faster, yet has some artifacts and most people stick with good ole VML. David Anson has put his hat in the ring by creating a new prototype canvas implementation in Silverlight. Thanks to Silverlight’s HTML Bridge, I had no trouble creating a Read the rest…

Posted by Dion Almaer at 6:18 am
4 Comments

+++--
3.4 rating from 29 votes

Wednesday, August 5th, 2009

HTML5 Audio + Processing(Canvas) Experiment

Category: Canvas, Showcase

Sebastian Deutsch has a nice new experiment that uses HTML5 audio + Processing (which uses Canvas) to visualize Twitter streams sync’d to music. In their words: We’ve created a litttle experiment which loads 100 tweets related to HTML5 and displays them using a javascript-based particle engine. Each particle represents a tweet – click on one Read the rest…

Posted by Dion Almaer at 12:55 am
7 Comments

++++-
4.1 rating from 29 votes

Monday, August 3rd, 2009

Cartagen: Rich mapping on the client side

Category: Canvas, Mapping

Ben Weissmann is one of the researchers at the MIT Media Lab’s Design Ecology group who’s working on Cartagen, a vector-based, client-side framework for rendering maps in native HTML 5. It’s impressive. Here he explains more: Using JavaScript and HTML5’s canvas element, Cartagen takes data (including OpenStreetMap data) and renders it in the browser. This Read the rest…

Posted by Dion Almaer at 6:15 am
15 Comments

+++--
3.9 rating from 54 votes

Friday, July 31st, 2009

WPS: PostScript and PDF interpreter for HTML 5 canvas

Category: Canvas, Showcase

It would be a pretty cool hack to implement a PostScript/PDF interpreter in JavaScript wouldn’t it? That is exactly what has been done with WPS. The code takes PS and really groks it so: < View plain text > javascript /n 10 def /w 25 def   0 0 n w mul dup .gbox   Read the rest…

Posted by Dion Almaer at 12:09 am
11 Comments

++++-
4.3 rating from 39 votes

Thursday, July 9th, 2009

jQuery Visualize: Updated accessible charts and graphs

Category: Canvas, jQuery

Scott Jehl has released jQuery Visualize, the plugin that groks HTML tables and generates lovely charts from it, all from a simple $(‘table’).visualize(); (lot’s of options for you to twiddle too if you want). First, you create a bog standard table like: < View plain text > HTML <table>     <caption>2009 Individual Sales by Read the rest…

Posted by Dion Almaer at 9:06 am
12 Comments

+++--
3.9 rating from 66 votes