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.


Thursday, April 22nd, 2010

HTML5 is my Arcade. Akihabara.

Category: Canvas, Games

Akihabara is a set of libraries, tools and presets to create pixelated indie-style 8/16-bit era games in Javascript. What does it consist of? Akihabara is composed of a number of libraries that use HTML5 canvas tag and some standard hooks. Gamebox module is complete and compact enough for making games: it allows multiple grouped objects Read the rest…

Posted by Dion Almaer at 6:40 am
2 Comments

+++--
3 rating from 3 votes

Friday, April 16th, 2010

“Visualize” data as graphs

Category: Canvas, JavaScript, jQuery

How do you visualize data in interesting ways but allow the data to be accessible for all? The jQuery Visualize work is the latest library that groks HTML and replaces the table with pretty graphs: The Visualize plugin parses key content elements in a well-structured HTML table, and leverages that native HTML5 canvas drawing ability Read the rest…

Posted by Dion Almaer at 9:17 am
Comment here

++++-
4.5 rating from 17 votes

Monday, April 12th, 2010

Move on Objective-C, CS5 to generate Canvas and JS

Category: Adobe, Canvas

We have been reminded of MAX showing Flash CS5 generating basic HTML5 code (Canvas/JS). That’s right. Adobe is a tools company. Although it helps to own the platform (hence keeping Flash alive and wanting it to win) as the competition to build the best tools is a given, that doesn’t mean that they can’t compete Read the rest…

Posted by Dion Almaer at 5:20 am
5 Comments

++++-
4.2 rating from 16 votes

Thursday, April 1st, 2010

Open Web Video Puzzle

Category: Canvas, Video

This is a fun one. The Open Video Sliding Puzzle takes a running video (from the public videos project) cuts it up, and builds a sliding puzzle on the fly. How does it work? Why Canvas and HTML5 video of course: < View plain text > javascript for (var i=0;i&lt;12;i++){         var Read the rest…

Posted by Dion Almaer at 6:10 am
7 Comments

+++--
3.8 rating from 18 votes

Monday, March 29th, 2010

CanVG: Using Canvas to render SVG files

Category: Canvas, SVG

We love to recursively implement one technology on top of another. We have had Canvas support added to IE via VML, Flash, and Silverlight. We have had SVG implemented in Flash. Flash implemented in SVG. The latest experiment is from Gabe Lerner and is CanVG. As you can guess, it renders SVG files via the Read the rest…

Posted by Dion Almaer at 6:23 am
4 Comments

+++--
3.8 rating from 21 votes

Friday, March 26th, 2010

Dynamic lighting effects in Canvas

Category: Canvas, Fun

Jonas Wagner has a perfect Friday fun demo that normal mapping and phong shading in JavaScript using Canvas. Your mouse cursor becomes the light source that dynamically lights up a 3D object: Jonas discusses how his code works: The 3D effect is basically created using 2 textures. One contains the color of each pixel and Read the rest…

Posted by Dion Almaer at 6:17 am
3 Comments

++++-
4.5 rating from 33 votes

GitHub moves network graph feature from Flash to Canvas

Category: Canvas, Flash

Given the current status of Canvas and the impending release of Apple’s iPad (which will have no Flash support at all), I finally decided to bite the bullet and do a complete rewrite of the Network Graph in JavaScript and Canvas. This is Tom Preston-Werner of GitHub, from his recent posted about migrating the network Read the rest…

Posted by Dion Almaer at 1:10 am
7 Comments

++++-
4.6 rating from 37 votes

Friday, March 19th, 2010

IE9 Canvas Support Leaked by AMD?

Category: Canvas, IE

I was on a panel at OSBC with Dave Mcallister of Adobe and Brian Goldfarb of Microsoft. I wanted to talk to Brian about canvas in IE9 but held off until later where I even offered the community up to write the IE code ;) Someone off the record told me last week “it is Read the rest…

Posted by Dion Almaer at 11:23 am
3 Comments

++++-
4.6 rating from 44 votes

Friday, March 12th, 2010

Ambilight Sample; video and canvas

Category: Canvas, Examples, Video

Sergey Chikuyonok gets his Philips Ambilight foo on as he created a HTML5 video + canvas sample that mimics the TV effect. As the video runs, a snapshot is sent over to JavaScript land where colors are worked out: function getMidColors(side) { var w = buffer.width, h = buffer.height, lamps = getOption(‘lamps’), block_width = getOption(‘block_size’), Read the rest…

Posted by Dion Almaer at 6:30 am
7 Comments

++++-
4.5 rating from 49 votes

Wednesday, March 10th, 2010

Harmony: Canvas Drawing Tool

Category: Canvas, iPhone, Showcase

Harmony is a new drawing tool, a HTML5/Canvas experiment with great potential. It provides some unique brush styles, and can produce some great-looking charcoal pencil style sketches, among other things. Better to try it out than explain it in words. Creator Mr. Doob (Richard Cabello) explains how he used Canvas to make it darker the Read the rest…

Posted by Michael Mahemoff at 4:50 am
3 Comments

++++-
4.4 rating from 66 votes

Wednesday, March 3rd, 2010

Touching Cloth; Canvas Fu

Category: Canvas

Andrew Hoyer shows his canvas Fu with Cloth, a great experiment using nice physics. What makes this simulation special is the speed at which everything is computed. Javascript (the language this is written in) is not exactly the most efficient language for this type of computation. This being said, much time was spent squeezing out Read the rest…

Posted by Dion Almaer at 6:12 am
12 Comments

++++-
4.8 rating from 65 votes

Thursday, February 11th, 2010

Copperlicht: A new WebGL 3D Engine

Category: Canvas, JavaScript, Library

We covered GLGE, a WebGL based engine recently, and now we have a new one; Copperlicht. The engine features: 3D World editor: CopperLicht comes with a full 3D world editor named CopperCube. Many supported 3D file formats: .3ds, .obj, .x, .lwo, .b3d, .csm, .dae, .dmf, .oct, .irrmesh, .ms3d, .my3D, .mesh, .lmts, .bsp, .md2, .stl. and Read the rest…

Posted by Dion Almaer at 6:03 am
10 Comments

++++-
4.3 rating from 33 votes

Monday, February 8th, 2010

Pseudo 3D tricks from old computer games for all your Canvas needs

Category: Canvas, Fun, Games, JavaScript

It is quite interesting to see how technology moves in circles. With canvas being the new fun toy to play with for creating browser-based games we have to find solutions to fake a 3D environment to be really fast (sure there is Canvas 3D but it is overkill for most games). The trick is to Read the rest…

Posted by Chris Heilmann at 7:04 am
6 Comments

++++-
4.3 rating from 29 votes

Thursday, January 28th, 2010

Canvas Benchmark

Category: Browsers, Canvas, Performance

The Freeciv.net crew has benchmarked a path in their canvas game. It is one data point, and tests more than just Canvas itself because a lot of code is running in the game. Thus, it ends up testing the union of a particular JavaScript path and the rendering of the canvas. Here are the results: Read the rest…

Posted by Dion Almaer at 6:09 am
23 Comments

++++-
4 rating from 30 votes

Tuesday, January 5th, 2010

Commodore 64 JavaScript Emulator

Category: Canvas, Fun, Games

Tim de Koning has done what folks do best with their winter holidays…. created something fun :) With JSC64 he has ported the Flash version to give us an emulator for the Commodore 64 in JavaScript. Tim’s work uses Canvas and he provides a jQuery plugin if you are that way inclined. It is fun Read the rest…

Posted by Dion Almaer at 6:06 am
6 Comments

++++-
4.5 rating from 33 votes

Tuesday, December 29th, 2009

Hand-Drawn Look in Canvas Drawing App

Category: Canvas

Steve Hanov has produced a Canvas-based drawing tool with a hand-drawn look. Lines can be drawn with a “sloppiness” option, with possible values “Draftsman”, “Artist”, “Cartoonist”, “Child”, and – perfect for this time of year – “Drunk” :). The FG Virgil font, applied to text elements, adds to the cartoon vibe. The techniques are used Read the rest…

Posted by Michael Mahemoff at 6:57 am
2 Comments

++++-
4.3 rating from 38 votes