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.


Wednesday, January 7th, 2009

Technical Details Behind iWork.com

Category: Apple, Canvas

As soon as I heard about the new iWork.com site launched yesterday, I knew I wanted to know more about how it was made. iWork.com is a web-based way to share and collaborate over your iWork documents. I searched around the blogosphere seeing if anyone knew any technical details, but didn’t find anything, so I Read the rest…

Posted by Brad Neuberg at 6:30 am
4 Comments

++++-
4 rating from 23 votes

Monday, January 5th, 2009

Who needs Flash? Having fun with Canvas and SVG

Category: Canvas, SVG

Over in SproutCore land, they have been talking about Peter Bergstrom and his amazing work with Canvas and SVG: Peter Bergstrom has been doing some amazing work with SVG and canvas tags in his SproutCore-based these project called PaperCube.  PaperCube visualizes citations their relationships between authors.  Watching the videos of his project, you’d swear he Read the rest…

Posted by Dion Almaer at 8:45 am
3 Comments

+++--
3.7 rating from 31 votes

2008: Awesome JavaScript

Category: Canvas

Jacob Seidelin has a really nice 2008 roundup of awesome JavaScript-yness that focuses a little on his own area of expertise (canvas whiz and all): 2008 has been just great, not least because of all the great stuff people have been doing with JavaScript, the new canvas element and the web in general. Browser vendors Read the rest…

Posted by Dion Almaer at 7:38 am
1 Comment

++++-
4.2 rating from 27 votes

Tuesday, December 23rd, 2008

Speed Dial Canvas Edition

Category: Canvas, Showcase

Christian Effenberger has a Christmas contribution for us, Quickchoice: Quickchoice is a Speed Dial clone for css transform supporting browsers. It’s a simple and quick “public domain” implementation of Opera’s Speed Dial. Currently useable with Safari 3.2 and probably Firefox 3.1 – through the http-protocol. For personal use you need to save the html file Read the rest…

Posted by Dion Almaer at 7:11 am
1 Comment

++++-
4 rating from 25 votes

Thursday, December 18th, 2008

Pixastic: JavaScript Image Manipulation Library

Category: Canvas, JavaScript

Pixastic uses <canvas>’s ability to expose raw pixel information to perform Photoshop-style image manipulation effects all in your standards-based browser. For an example of Pixastic in action, the library’s authors have built a cute little Photoshop clone in a browser: Here’s an example of using the underlying API: < View plain text > javascript var Read the rest…

Posted by Ben Galbraith at 11:57 am
8 Comments

+++--
3.8 rating from 31 votes

Tuesday, December 16th, 2008

JavaScript Raster Bar Effect

Category: Canvas

This is a fun canvas demo by Stefan Pettersson that brings you back to your Amiga days (if you remember those, or weren’t an Atari man). You can check out the JavaScript that makes the world turn. function start() { var resolution = 25; var speed = 0.02; var position = 150; var size = Read the rest…

Posted by Dion Almaer at 1:00 pm
11 Comments

++++-
4 rating from 23 votes

Thursday, December 4th, 2008

CanvasTurtle

Category: Canvas, JavaScript

Eiten Suez, author of jMatter, has been up to some fun hacking recently. He just released CanvasTurtle a JavaScript and Canvas version of the old favourite TurtlePascal. You can build snow flakes with code like this: < View plain text > javascript function side(size, level) {     if (level==0) {         Read the rest…

Posted by Dion Almaer at 6:15 am
3 Comments

+++--
3.7 rating from 21 votes

Monday, December 1st, 2008

AbstractCanvas: HTML Canvas and Java2D in one fell swoop

Category: Canvas, GWT, Java

Rodrigo Reyes has announced a new project called AbstractCanvas, a GWT project that sits on top of HTML Canvas and Java2D. The same code can thus run in the browser, or on the server. You can then write code such as: VerticalPanel vPanel = new VerticalPanel(); CanvasPanelExt canvas1 = new CanvasPanelExt(300,150); canvas1.setFillStyle(Color.WHITE); canvas1.setGlobalAlpha(1.0); canvas1.fillRect(0, 0, Read the rest…

Posted by Dion Almaer at 7:09 am
Comment here

+++--
3.8 rating from 16 votes

Tuesday, November 25th, 2008

Car Navigation Map Mashup in Canvas

Category: Canvas

Ernest is up to his old canvas tricks again. This time he has published a car navigation demo that lets you drive around a set of tiles from a map (Google Maps, OpenStreetMap) and it paints your course at the same time. How did he do it? The key of the whole implementation is the Read the rest…

Posted by Dion Almaer at 8:01 am
4 Comments

++++-
4.3 rating from 20 votes

Canvas Step by Step Tutorial

Category: Canvas

Bill Mill has created a nice step by step canvas tutorial that has you building a breakout clone, and you can interactively run code on the fly. The code path takes you through the following steps: Introduction Draw a Circle Add Some Color Action Library: an Interlude Bounce Add a Paddle The Keyboard The Mouse Read the rest…

Posted by Dion Almaer at 12:01 am
3 Comments

++++-
4.4 rating from 25 votes

Friday, November 21st, 2008

Digg Attack: A Canvas Game

Category: Canvas, Fun, Games

Fun news for a Friday. From Jacob Seidelin–the dude behind JavaScript Super Mario Brothers–comes Digg Attack, an original JavaScript game using <g;canvas> for visuals (and Flash for music). As an added twist, the game uses Digg to provide a sort of unique twist; enemies in the game are based on stories in the Digg API Read the rest…

Posted by Ben Galbraith at 7:00 am
2 Comments

+++--
3.7 rating from 25 votes

Thursday, November 20th, 2008

Liquid Canvas: Draw inside canvas with a DSL

Category: Canvas, jQuery

< View plain text > javascript $(window).load(function() {   $("#example").liquidCanvas(     "[shadow border gradient] => roundedRect{radius:50}"); }); This is an example of Liquid Canvas, a new library from Steffen Rusitschka who created ShadedBorder and RUZEE.Borders. Liquid Canvas is a JavaScript library which allows you to draw inside an HTML canvas element with an easy Read the rest…

Posted by Dion Almaer at 8:11 am
4 Comments

+++--
3.4 rating from 24 votes

Wednesday, November 19th, 2008

Canvas in 3D

Category: Canvas

Peter Nederlof of the infamous Dutch “Lost Boys” created a 3D engine in Canvas. Straight from the horse’s mouth: I’ve been working on a 3D engine on canvas for some time, and as I was posting a message on our blog, I figured you guys might be interrested as well :) The demo is over Read the rest…

Posted by Chris Heilmann at 10:33 am
15 Comments

++++-
4.3 rating from 44 votes

Thursday, November 13th, 2008

Projective texturing using Canvas

Category: Canvas

Steven Wittens has taken on a challenge to make fake 3D in Canvas and built a library for projective texturing: Canvas is still limited to 2D: its drawing operations can only do typical vector graphics with so-called affine transformations, i.e. scaling, rotating, skewing and translation. Though there have been some efforts to try and add Read the rest…

Posted by Dion Almaer at 8:01 am
13 Comments

++++-
4.2 rating from 40 votes

Friday, October 31st, 2008

JSSpeccy: A ZX Spectrum Emulator in JavaScript

Category: Canvas, Fun

[via Simon Willison] A little bit of Friday JavaScript-craziness for you. Matt Wescott has created a ZX Spectrum emulator in JavaScript. The Sinclair ZX Spectrum was an old-skool PC from the 80s. Details: Readme file Run JSSpeccy online (includes 10 classic games!) Download JSSpeccy (644Kb) JSSpeccy Subversion repository I especially like how Matt describes himself: Read the rest…

Posted by Brad Neuberg at 7:00 am
9 Comments

++++-
4.5 rating from 24 votes

Tuesday, October 28th, 2008

GameJS: Canvas Game Library

Category: Canvas, Games

Tommy Maintz has created a fun project called GameJS a 2d game development framework using JavaScript and Canvas. The API GameJS.framework.Game – This is the main game class you extend when creating the game. It has the following methods which you have to override: initialize, loadContent, update and draw. This is all very similar to Read the rest…

Posted by Dion Almaer at 9:15 am
5 Comments

++++-
4.4 rating from 47 votes