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, March 29th, 2007

dojo.gfx presentations in dojo.gfx

Category: Canvas, Dojo

Dylan Schiemann has posted his presentations on dojo.gfx which are themselves written in dojo.gfx instead of Powerpoint/Keynote/S5. Web Vector Graphics and Dojo – Draw This! Web Vector Graphics: Myth or Reality? Vector Graphics and Comet with Dojo It would be nice if you some key bindings were put into the presentations :)

Posted by Dion Almaer at 7:27 am
32 Comments

++---
2.7 rating from 69 votes

Microsoft, Canvas, and the WHATWG

Category: Canvas, Conferences, IE, Microsoft

Microsoft made some interesting statements at their Microsoft Technical Summit event (MTS07) this week. Pete LePage, a Product Manager on the IE team, gathered a small swath of the academic, business, and open-source community constituents in a room, chatted about the future of IE, and asked for feedback. Some interested bits: It turns out Microsoft Read the rest…

Posted by Ben Galbraith at 7:00 am
65 Comments

++++-
4 rating from 35 votes

Friday, March 23rd, 2007

Silly canvas: throwing tomatoes at Britney

Category: Canvas, Fun

At our talk on the State of Ajax, a few minutes before hand we were asked to code up a simple canvas example on the fly and we came up with a very silly example indeed…. and is only fitting for a Friday. We created the ability to throw tomatoes, or paintball, Britney Spears.

Posted by Dion Almaer at 12:42 am
18 Comments

++---
2.1 rating from 77 votes

Friday, March 16th, 2007

JavaScript Ray-Tracing

Category: Canvas, Showcase

Adam Burmister sent us what he calls “The Worst Application of JavaScript Ever”. Perfect for a Friday :) He has built something “nobody will ever need a JavaScript based ray-tracer. The point of the exercise was actually to learn more about the Canvas HTML element, and ray tracing techniques, not JavaScript.”

Posted by Dion Almaer at 7:21 am
14 Comments

++++-
4.4 rating from 49 votes

Friday, March 9th, 2007

3D Friday with Ajax3D

Category: Canvas

For this weeks 3D Friday we show Ajax3D a simple open source 3D engine written by Eben Upton that uses the HTML canvas tag for output.

Posted by Dion Almaer at 12:33 am
6 Comments

+++--
3.9 rating from 35 votes

Friday, March 2nd, 2007

Canvas 3D Renderer Tweaked

Category: Canvas

Hans Schmucker has updated his Canvas 3D Renderer with new sample data, a few performance tweaks, background image support, support for colored polygons and a few other tweaks here and there. The car you see is not a sprite, it’s simply an image put in front of the canvas for my amusement. Right now the Read the rest…

Posted by Dion Almaer at 8:10 am
7 Comments

+++--
3.5 rating from 33 votes

Monday, February 19th, 2007

3D Renderer using Canvas

Category: Canvas, Showcase

Hans Schmucker has created a proof of concept for 3D Renderer using Canvas. I’ve written another 3D Renderer for the Canvas element… however it is differet to the existing implementations, this one loads a standard Alias Wavefront OBJ file and renders it. It’s not as far as it could be so far (mainly because the Read the rest…

Posted by Dion Almaer at 8:30 am
4 Comments

+++--
3.8 rating from 40 votes

Friday, February 2nd, 2007

Plotr: Charting library via canvas with Prototype

Category: Canvas, Prototype

Bas Wenneker has written Plotr, a charting engine in Prototype that uses canvas. Example < View plain text > javascript var dataset = {         ‘myFirstDataset’: [[0, 1], [1, 0.8], [2, 2.3], [3, 1.3], [4, 2.56]],         ‘mySecondDataset’: [[0, 0.5], [1, 0.5], [2, 2], [3, 1], [4, 1.4]],   Read the rest…

Posted by Dion Almaer at 9:14 am
19 Comments

++++-
4 rating from 39 votes

Monday, January 1st, 2007

jsFlickrSlideshow: Sliding through Flickr

Category: Canvas, JavaScript, Library, Showcase

The jsFlickrSlideshow is a JavaScript component that wraps the canvas tag to display images from Flickr. Check out the project home page View the Demo Download the code

Posted by Dion Almaer at 7:00 am
5 Comments

++---
2.7 rating from 18 votes

Thursday, December 21st, 2006

Create cross browser vector graphics with Dojo

Category: Canvas, Dojo, UI

Dylan Schiemann, co-creator of the Dojo toolkit, has written a broad piece on creating cross browser vector graphics with Dojo. The article delves into the new dojo.gfx library that abstracts the slight mess of SVG vs. Canvas vs. VML. One of the examples in the article discusses drawing a clock with this snippet that shows Read the rest…

Posted by Dion Almaer at 8:30 am
14 Comments

++++-
4.1 rating from 30 votes

Tuesday, October 3rd, 2006

Dynamic Graphics in the Browser

Category: Canvas, Programming, UI

Dynamic graphics inside the browser are starting to become a little bit more practical, thanks to increased support for Canvas and SVG. I recently discussed eight competing techniques for generating dynamic graphics in an Ajax application, each with their own implications for portability, usability, and performance. The following techniques are descibed: SVG Canvas Dynamic images Read the rest…

Posted by Michael Mahemoff at 6:21 am
10 Comments

+++--
3.7 rating from 44 votes

Monday, March 27th, 2006

Google puts the Canvas in IE

Category: Canvas, Editorial

We discussed Canvas in IE when Emil Eklund did a proof of concept. Benjamin Joffe has taken the baton and recently announced that Google has got canvas for IE, and that it will soon be seen on code.google.com. IE 7 doesn’t step up to the plate? Google comes in to finish the job. We will Read the rest…

Posted by Dion Almaer at 8:12 am
13 Comments

+++--
3.9 rating from 52 votes

Friday, February 10th, 2006

New Javascript/Canvas Graph library

Category: Canvas, JavaScript, Library

Aslak Hellesøy and Dave Hoover have put together a JavaScript library that can draw interactive graphs (as in nodes, not as in charts). The library currently has three functional layers: The graph model (Graph, Node and edges) Layout algorithms: (Graph.Layout.*) Rendering schemes: (Graph.Renderer.*) Usage < View plain text > javascript var g = new Graph(); Read the rest…

Posted by Dion Almaer at 9:46 am
14 Comments

+++--
3.7 rating from 96 votes

Friday, December 30th, 2005

Canvas in IE

Category: Canvas, IE

As soon as we saw SVG, Ben thought that it would be quite possible to take the VML support that IE has had for a long time, and make a converter that would make a subset of SVG work in IE. Emil Eklund had the same thought, and acted on it. In this case, his Read the rest…

Posted by Dion Almaer at 9:09 am
10 Comments

++++-
4 rating from 77 votes

Monday, December 26th, 2005

Canvas Reflection.js

Category: Canvas

We pointed you to Romain Guy’s reflection in Canvas. “Cow” took inspiration from Romain’s work and created reflection.js, to allow you to add this effect in a degradable fashion. View a demo of it at work Download the code The more cool things we see with Canvas (only scratching the surface), the more we wish Read the rest…

Posted by Dion Almaer at 8:48 am
4 Comments

+++--
3.9 rating from 18 votes

Friday, December 23rd, 2005

Ajaxify your Canvas

Category: Canvas

Dave Hoover has written up a nice tutorial on combining ajax techniques with Canvas in Canvas, Ajax, and the Supertrain. In this article I’m going to walk through a less complex experiment, using canvas to graphically represent the real-time state of a fictional railway system (live example). I’m not going to deconstruct the details of Read the rest…

Posted by Dion Almaer at 9:52 am
Comment here

+++--
3.8 rating from 8 votes