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.


Saturday, October 9th, 2010

Normal Mapped Lighting for Photos using Canvas

Category: Canvas, Examples

Francois Laberge has a fun demonstration of creating 3d looking effects via lighting and normal mapping on 2d photos. The demos progressively add features, from left to right lighting, to glow effects, to a multiple colored lighting extravaganza! Very nice work Francois!

Posted by Dion Almaer at 10:19 am
9 Comments

++---
2.9 rating from 14 votes

Tuesday, September 14th, 2010

“Or so they say…” by Mr. Doob

Category: 3D, Canvas

Via Mr. Doob comes a cool canvas demo called “Or so they say…” he created. What’s interesting about this demo is it uses HTML5 Audio and Canvas, including Mr. Doob’s Three.js library and sequencer that he also used on The Wilderness Downtown project. Three.js is similar to Papervision3D in the Flash world, allowing you to Read the rest…

Posted by Brad Neuberg at 6:00 am
Comment here

+++--
3.4 rating from 12 votes

Friday, September 10th, 2010

HTML5 Canvas Image Effects: Black & White

Category: Canvas

Marco Lisci has written a tutorial on creating a black and white image effect using the Canvas tag. The heart of his tutorial is using getImageData() and looping through the red, green, blue, and alpha values of each pixel to change it’s luminance: So, what can we use to make an image black and white? Read the rest…

Posted by Brad Neuberg at 5:30 am
4 Comments

+++--
3 rating from 3 votes

Monday, August 30th, 2010

Design 3D Models in a Browser

Category: 3D, Canvas

Perfect for a Monday is a cool 3D model editor built using the Canvas tag and created by Jayesh Salvi:

Posted by Brad Neuberg at 6:00 am
Comment here

++---
2.9 rating from 10 votes

View Source Tutorial: Content Site Using HTML5 Canvas + CSS3

Category: Canvas, Tutorial, View Source

Posted by Brad Neuberg at 5:00 am
5 Comments

++---
2.9 rating from 14 votes

Wednesday, August 25th, 2010

Real World Canvas Tips from Hakim El Hattab

Category: Canvas

From Hakim El Hattab (who has some very nifty HTML5 experiments up) comes some nice tips on using the Canvas tag: Cross browser implementation There are no real discrepancies between the canvas outputs of different browsers so long as the JavaScript code is written correctly (if not, browsers tend to try and fix things for Read the rest…

Posted by Brad Neuberg at 5:00 am
12 Comments

++---
2.7 rating from 6 votes

Sunday, August 22nd, 2010

Want to pack JS and CSS really well? Convert it to a PNG and unpack it via Canvas

Category: Canvas, Performance

Jacob Seidelin of nihilogic fame (remember his Super Mario in JavaScript solution) is one of my unsung heroes of JavaScript. His solutions have that Dean Edwards “genius bordering on the bat-sh*t-crazy” touch that make you shake your head in disbelief when they come out but later on become very interesting. One of his posts from Read the rest…

Posted by Chris Heilmann at 2:30 pm
19 Comments

+++--
3.8 rating from 4 votes

Wednesday, August 18th, 2010

JavaScript Gameboy Emulator: Memory and GPU

Category: Canvas, Tutorial

Jack Vaughn posted on Ajaxian recently about a new blog series on building a Gameboy emulator using JavaScript. Now Parts II and III have been posted in the series: Part 1: The CPU Part 2: Memory Part 3: GPU Timings In the Memory section, Imran Nazar builds up a JavaScript MMU that can interpret the Read the rest…

Posted by Brad Neuberg at 6:00 am
4 Comments

+++--
3.5 rating from 4 votes

Wednesday, July 28th, 2010

Canto.js: An Improved Canvas API

Category: Canvas, JavaScript, Library

Javascript author extraordinaire David Flanagan released Canto.js recently, a lightweight wrapper API for canvas, introduced here and documented at the top of the source code. Example: javascript < view plain text > canto("canvas_id").moveTo(100,100).lineTo(200,200,100,200).closePath().stroke(); Notice three things: canto() returns an abstraction of the canvas – a “Canto” object. As with jQuery and similar libraries, there’s method Read the rest…

Posted by Michael Mahemoff at 11:10 pm
19 Comments

++---
2.8 rating from 4 votes

Monday, July 26th, 2010

Canvas Color Cycling

Category: Canvas, Games, Graphics, Performance

Interest in Canvas, as well as mobile apps, has led to a renaissance of old-school 8-bit graphics. Joe Huckaby of Effect Games has been playing around with color cycling, leading to some stunning effects. Anyone remember Color cycling from the 90s? This was a technology often used in 8-bit video games of the era, to Read the rest…

Posted by Michael Mahemoff at 7:21 pm
13 Comments

++---
2.6 rating from 7 votes

Wednesday, June 23rd, 2010

IE9 supports Canvas…. hardware accelerated!

Category: Browsers, Canvas, IE

Huge news. My canvas crusade is done. IE9 is supporting canvas, and it is hardware accelerated, in the third preview release: With the third platform preview, we introduce support for the HTML5 Canvas element. As you know our approach for standards support is informed both by developer feedback and real word usage patterns today, along Read the rest…

Posted by Dion Almaer at 4:54 pm
25 Comments

+++--
3 rating from 2 votes

Friday, June 11th, 2010

Liquid Particles

Category: Canvas, Fun

Sit back and enjoy: The bulk of the code is just: javascript < view plain text > function run() {     ctx.globalCompositeOperation = "source-over";     ctx.fillStyle = "rgba(8,8,12,.65)";     ctx.fillRect( 0 , 0 , canvasW , canvasH );     ctx.globalCompositeOperation = "lighter";         mouseVX    = mouseX – Read the rest…

Posted by Dion Almaer at 2:58 am
6 Comments

++++-
4.5 rating from 2 votes

Thursday, May 27th, 2010

Canvas optimization tip: Get image data as infrequently as possible

Category: Canvas, Performance, Tip

We have learned to touch the DOM as little as possible for performance sakes. Batch up changes, and do one call to innerHTML say. Talk over the evil boundary of the DOM as infrequently as possible. Well, Selim Arsever has found a similar tip for Canvas that caused a ~40% performance improvement on some of Read the rest…

Posted by Dion Almaer at 7:01 am
9 Comments

++++-
4.5 rating from 2 votes

Wednesday, May 12th, 2010

Music score notation in the browser

Category: Canvas

css < view plain text > score {   title: Hip Tune   artist: Hip Person     bar { v8 C4 D4 E4 F4 (C4 E4 G4) }   bar { v8 C4 D4 E4 F4 (C4 E4 G4) } repeat 3 } What if you could write music in a notation like the Read the rest…

Posted by Dion Almaer at 5:11 am
5 Comments

++++-
4.5 rating from 2 votes

Monday, May 10th, 2010

Hummingbird: Real time view of your Web traffic

Category: Canvas, Node, Server

Michael Nutt and Benny Wong have created a fun realtime web analytics product called Hummingbird. It comes with awesome buzzwords too! Node! Canvas! Web Sockets! MongoDB! To add tracking, you simple sprinkle in Gilt.Hummingbird.track(env) like this: Which calls the client: Which, as you can see, sets up a tracking gif on the server. You can Read the rest…

Posted by Dion Almaer at 3:58 pm
1 Comment

++++-
4.5 rating from 2 votes

Thursday, April 22nd, 2010

Blowing up HTML5 video

Category: Canvas, Video

Sean Christmann has been experimenting with canvas and HTML 5 video. The results? Blowing up a HTML5 video: He considers the implementation to be ”bit of hackish” though and explains why: Don’t ask me why, but copying pixel data out of a video tag is expensive, so expensive that drawing it into a temporary canvas, Read the rest…

Posted by José Jeria at 10:59 am
Comment here

+++++
5 rating from 2 votes