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, October 24th, 2008

Round the Web: Vector Graphics

Category: .NET, Canvas, SVG

Here’s a quick round-the-web series of updates on happenings with SVG, Canvas, and open web graphics libraries. First is a cool demo using SVG called Blobular: I got the demo working in Firefox 3, though there were some glitches in Safari 3. As a cool aside, when I was uploading the screencast above YouTube transparently Read the rest…

Posted by Brad Neuberg at 7:00 am
1 Comment

++++-
4.1 rating from 26 votes

Wednesday, October 8th, 2008

Antisocial: 3D in Canvas with Sound

Category: Canvas, jQuery, Showcase

Gasman has created Antisocial, a very enjoyable demo of Canvas doing fake 3d and 2d along with that ZX Spectrum sound that you loved as a kid. Check out the tool to see where the magic happens, and make some music, Spectrum style! I feel like we have been light on showcases recently, so please Read the rest…

Posted by Dion Almaer at 5:42 pm
9 Comments

+++--
3.6 rating from 28 votes

Friday, October 3rd, 2008

Life: The game in Canvas

Category: Canvas, Games

Kyle McGregor took a look at the JavaScript games for Life out there and decided to write a Canvas version that ends up being a lot snappier. The entire game is pretty small: var counterface = 0; var oInstance; var Game = Class.create(); Game.prototype = { ‘working’: false, ‘map’: ”, ‘interval_id’: ”, ‘initialize’: function() { Read the rest…

Posted by Dion Almaer at 10:07 am
3 Comments

+++--
3.3 rating from 22 votes

Friday, September 26th, 2008

Gravity: Some real Friday fun

Category: Canvas, Fun

Eric Seidel normally spends his time building browsers, but he has a fun little bit of JavaScript code to show us this time. Gravity was inspired by the Flash Wii Ad that has been going around that uses Flash to explode out of the page. The bookmarklet takes your form elements and images and starts Read the rest…

Posted by Dion Almaer at 9:56 am
8 Comments

+----
1.7 rating from 119 votes

Wednesday, September 24th, 2008

Detailed JavaScript and Processing.js from John Resig

Category: Canvas, Presentation

John Resig has given some great talks recently, and just posted about some of them. First, we have his interactive learning area where the presentation is just a JavaScript application that you can play with. Double click on the code, make a change, and save away! The talk goes into the innards of the language Read the rest…

Posted by Dion Almaer at 6:00 am
Comment here

+++--
3 rating from 29 votes

Tuesday, September 23rd, 2008

Sphere: Spherical effect via canvas

Category: Canvas

Christian “Mr. Canvas Effects” Effenberger has shared Sphere.js another effect that allows you to add a spherical picture effect (including background gradient) to images on your web pages. This joins the many other effects such as Slided and Filmed. As always, you can add these effects with simple CSS classes on the images.

Posted by Dion Almaer at 4:54 am
6 Comments

++++-
4 rating from 38 votes

Thursday, September 18th, 2008

Sandbag text flow with Canvas

Category: Canvas

Jacob Seidelin has implemented Sandbag text wrapping with Canvas allowing the text to flow nicely around an object: With CSS you can make text wrap around an image using the float property and for most purposes this is quite adequate. However, it doesn’t take into account the actual image and treats it as one big Read the rest…

Posted by Dion Almaer at 7:37 am
5 Comments

+++--
3.2 rating from 22 votes

Wednesday, September 10th, 2008

Using Canvas in IE via Flash

Category: Canvas

Grant Jones stepped up and has written a gues t post on implementing Canvas using Flash. Grant starts out with the timeline of shims: Manish Jethani mentions something about the canvas tag being used for a 3D game, John Dowdell from adobe responds in Nov. 2005 Manish Jethani suggests a way to do a SWF-based Read the rest…

Posted by Dion Almaer at 7:09 am
18 Comments

+++--
3.8 rating from 19 votes

A JavaScript Ode to the Large Hadron Collider

Category: Canvas, JavaScript

Jacob Seidelin has honoured the folks at CERN who will be “pushing the button tomorrow morning to fire up the Large Hadron Collider, the largest particle accelerator ever built” by creating a perfect simulation of what is going on. Try not to destroy the world as you play with it.

Posted by Dion Almaer at 6:19 am
6 Comments

+++--
3.5 rating from 24 votes

Wednesday, September 3rd, 2008

Coverflow again…. with Canvas

Category: Canvas, Examples

For some reason, we like to implement Coverflow to see if the technology of choice is decent enough to do so. This latest version works with Canvas, and does a nice job of smoothly doing the animations at hand. All you have to do is: < View plain text > javascript Coverflow.init(     [ Read the rest…

Posted by Dion Almaer at 7:33 am
Comment here

+++--
3.5 rating from 51 votes

Drag and drop via sneaky Textarea hack

Category: Canvas, JavaScript

Ernest Delgado put together work from an earlier project, and the realization that textareas are native drop targets, to create Drag and Drop without Drag and Drop. Something that I never realized before is that text areas are drop targets by default. Using this property alone (without registering drag events on the source elements), we Read the rest…

Posted by Dion Almaer at 7:02 am
8 Comments

+++--
3.3 rating from 27 votes

Thursday, August 28th, 2008

The State of SVG Browser Support + Using Flash for SVG in Internet Explorer

Category: Canvas, SVG

As part of the Open Web Advocacy work I’ve started with Dion and others at Google, one of my goals right now is to help increase awareness and support around doing 2-D/vector graphics on the open web. This includes tools such as the Canvas tag, SVG (Scalable Vector Graphics, an XML markup language for vector Read the rest…

Posted by Brad Neuberg at 5:45 am
10 Comments

++++-
4.2 rating from 15 votes

Thursday, July 31st, 2008

No Browser Left Behind… without Canvas

Category: Browsers, Canvas

Vladimir Vuki?evi? normally hacks on Mozilla products, but spent a little time on an experiment with IE. An experiment that looks very exciting indeed. I love canvas, and wish that it was ubiquitous. We have great wrappers out there such as dojo.gfx, but wouldn’t it be nice if canvas worked everywhere? (and the full API Read the rest…

Posted by Dion Almaer at 2:00 am
6 Comments

++++-
4.4 rating from 38 votes

Tuesday, July 29th, 2008

ProtoChart: Using Canvas to give you good looking charts

Category: Canvas, Library, Prototype

ProtoChart is a new opensource library using Prototype and Canvas to create good looking charts. Features Line, bar, pie, curve, mix, and area charts available Multiple data series on same graph Legend support Customizable grid, grid border, background Customizable axis-tick values (both x and y) Check out a live demo of ProtoChart at work.

Posted by Dion Almaer at 6:00 am
4 Comments

+++--
3.9 rating from 19 votes

Thursday, July 17th, 2008

Defender of the Favicon

Category: Canvas, Games

Mathieu Henri saw Scott Schiller’s generated favicons VU meter and wanted to “push the concept of generated favicons further and pack a thrilling retro shooter in 16×16 pixels using JavaScript, canvas and data: URIs.” Wow. He went and did it. The entire game runs in the favicon! DEFENDER of the favicon was done in 3 Read the rest…

Posted by Dion Almaer at 8:06 am
6 Comments

++++-
4.4 rating from 37 votes

Tuesday, July 15th, 2008

Paint Servers: SVG and Canvas

Category: Canvas, SVG

Robert O’Callahan and Dave Hyatt have been chatting about paint servers as Robert creates SVG ones and then arbitary elements. This continues the meme of taking common use cases and making them easy via CSS (e.g. reflections). Here is the SVG version: < View plain text > HTML <html xmlns="http://www.w3.org/1999/xhtml"     xmlns:svg="http://www.w3.org/2000/svg"> <head> <style> Read the rest…

Posted by Dion Almaer at 7:40 am
3 Comments

+++--
3.4 rating from 19 votes