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.


Monday, March 16th, 2009

Going full circle: could falling back to Flash solve IE’s lack of canvas support?

Category: Canvas, Flash, IE

There is an interesting blog post* and demo code on Azarask explaining Flash Canvas as a solution for IE’s lack of support for Canvas: How does FlashCanvas work? FlashCanvas is modeled after ExplorerCanvas which means it is a turn-key solution for adding Canvas support to IE. You can code away, happily using open standards and Read the rest…

Posted by Chris Heilmann at 4:43 pm
17 Comments

++++-
4.3 rating from 24 votes

Wednesday, March 11th, 2009

Bespin Talk at Mozilla Labs Meetup

Category: Bespin, Canvas, Comet, Presentation

I went along last night to the London Mozilla Labs meetup, where Dion, Ben, and Joe delivered a presentation on Bespin. These are my notes from the event. Goals Bespin – initially an experiment, now interested to see how far it can go as a coding environment (among other things). “The editor of our dreams”: Read the rest…

Posted by Michael Mahemoff at 6:34 am
2 Comments

++++-
4 rating from 23 votes

Wednesday, March 4th, 2009

Detect if the browser supports APNG

Category: Canvas, JavaScript, Library

< View plain text > javascript (function(_global) {     var apng_test = new Image(),     canvas = document.createElement("canvas"),     ctx = canvas.getContext("2d");     apng_test.src = "apng-test.png"; // a data URI will cause a security error so you _have_ to link to external resource     // frame 1 (skipped on apng-supporting Read the rest…

Posted by Dion Almaer at 7:00 am
13 Comments

++---
2.9 rating from 28 votes

Monday, March 2nd, 2009

Manipulating video in real time with Canvas

Category: Canvas

Now that we are getting browsers that natively grok video as well as images and the like, we can do interesting things. Paul Rouget has demonstrated “chroma-keying” (green screen effect) using JavaScript, the video tag, and canvas: The document establishes two canvas elements, with the IDs c1 and c2. Canvas c1 is used to display Read the rest…

Posted by Dion Almaer at 12:44 pm
7 Comments

++++-
4.2 rating from 29 votes

Wednesday, February 25th, 2009

3D Canvas Demos in 2D Canvas

Category: Canvas, Examples

Paul Baukus pointed us to an English translation of some of the amazing stuff he saw in his recent trip to Japan. In this case, it’s an emulation of 3D rendering in canvas’ 2D context: This stuff is CPU intensive, but is a pretty nice example of what’s possible.

Posted by Ben Galbraith at 4:00 am
6 Comments

++++-
4 rating from 33 votes

Monday, February 23rd, 2009

HTML5 Canvas Cheat Sheet

Category: Canvas, Examples, Tip

Jacob is back, and this time he has a cheat sheet with him. It is nice to see the Canvas API fitting on one sheet here, and I really like the images showing how things look like and work.

Posted by Dion Almaer at 12:56 am
1 Comment

++++-
4 rating from 21 votes

Thursday, February 19th, 2009

Box2D Ported to JavaScript Using Canvas

Category: Canvas, Examples

Robert Kieffer recently told us about Box2DJS, an automated port of the popular Box2D physics library to JavaScript using <canvas> for the rendering. Using Box2DJS, you can create a flatland-esque 2D world that obeys Newtonian physics: < View plain text > js var worldAABB = new b2AABB(); worldAABB.minVertex.Set(-1000, -1000); worldAABB.maxVertex.Set(1000, 1000); var gravity = new Read the rest…

Posted by Ben Galbraith at 7:00 am
6 Comments

++++-
4.6 rating from 34 votes

Wednesday, February 18th, 2009

Canvas for a Text Editor?

Category: Bespin, Canvas

The following is a lightly edited repost from an entry on my personal blog. Culling through the Bespin feedback we received post-launch, it’s clear that a few aspects of the project are controversial. I’d like to address one of them: our choice of canvas as the rendering engine for the editor. (In addition to feedback, Read the rest…

Posted by Ben Galbraith at 8:00 am
19 Comments

++++-
4 rating from 50 votes

Thursday, February 12th, 2009

Bespin: A new Mozilla Labs experimental extensible code editor using Canvas

Category: Canvas, JavaScript, Mozilla, Showcase, Utility

Ben and I are excited to be releasing the first concept out of the Mozilla Developer Lab. As you know, we are big believers in the Open Web. Chris Wilson mentioned that many people are still building Web applications on top of browser technology from yester year. What if we built on more leading edge Read the rest…

Posted by Dion Almaer at 9:50 pm
47 Comments

++++-
4.6 rating from 83 votes

Tuesday, February 10th, 2009

Canvas World Map

Category: Canvas, Showcase

Jon Combe has implemented a world map using Canvas to draw it all, for his JAWStats website statistics package. You can tweak the color combinations and highlight areas, but no clicking and moving around just yet. Here are some of Jon’s thoughts: The smallest places aren’t included on the map, so if you live in Read the rest…

Posted by Dion Almaer at 6:38 am
6 Comments

+++--
3.2 rating from 24 votes

Thursday, February 5th, 2009

PS3-like Slideshow Implementation with Canvas

Category: Canvas, Showcase

Jérôme Wax has created a really nice PS3-like slideshow mashing up Flickr with Canvas to drive. Where you place your mouse will effect the movement and speed of the slideshow from left to right. Nice and snappy.

Posted by Dion Almaer at 4:22 am
5 Comments

+++--
3.7 rating from 20 votes

Friday, January 30th, 2009

Cubic Bezier timing function for all

Category: Canvas

Christian Effenberger is up to his tricks once again. This time he has created a cubic-bezier-timing function in the public domain that is compatible with -webkit-transition-timing-function: I thought that in addition to the -webkit-transition-timing-function cubic-bezier(), support for a 100% compatible easing defined by a cubic bezier function as a public domain javascript would be welcome. Read the rest…

Posted by Dion Almaer at 7:26 am
1 Comment

++++-
4.4 rating from 20 votes

Thursday, January 29th, 2009

Rotate images with Canvas jQuery plugin

Category: Canvas, jQuery

Pawel Witkowski released an interesting jQuery plugin called Wilq32.RotateImage that lets you rotate images simply: < View plain text > javascript // just do it 5 degrees $(‘#image2’).rotate({angle:5});   // animate the rotation var rot=$(‘#image3’).rotate({maxAngle:25,minAngle:-55,   bind: [     {"mouseover":function(){rot.rotateAnimation(85);}},     {"mouseout":function(){rot.rotateAnimation(-35);}}   ] }); You can also do this type of thing Read the rest…

Posted by Dion Almaer at 4:20 am
3 Comments

++---
2.7 rating from 6 votes

Saturday, January 24th, 2009

Captcha cracking in JavaScript with Canvas and neural nets

Category: Canvas, Security

Everybody’s favourite glass shield to protect web apps are CAPTCHAS. These are the distorted characters displayed on a page that a user has to enter before gaining access or sending off a form. They annoy normal users, are largely inaccessible to blind users or dyslexic people and are not that safe as we think they Read the rest…

Posted by Chris Heilmann at 5:42 am
10 Comments

++++-
4.4 rating from 45 votes

Monday, January 19th, 2009

C3DL: Canvas 3D JavaScript Library

Category: Canvas

C3DL has a new release that “includes the following major features: – Collada Support: The ability to load collada models (of the triangle, polylist or polygon variety) along with their textures. Models with multiple nodes are supported and their names and relative transformation will all be imported.” What is C3DL? The Canvas 3D JS Libary Read the rest…

Posted by Dion Almaer at 8:01 am
8 Comments

+++--
3.6 rating from 23 votes

Wednesday, January 7th, 2009

Watch out for the zoom; Debugging fun with Canvas

Category: Canvas, Debugging

Ben was cursing at a bug in some canvas code that he was playing with, where the rendering was off. One piece of his UI was blurred instead of crisp. The debugging exersize was fun, and he shares it with you on his personal blog. The moral of the story is: watch out for that Read the rest…

Posted by Dion Almaer at 8:49 am
7 Comments

++++-
4 rating from 11 votes