New <canvas> tag in Firefox and Safari

| 5 Comments

I've been reading about the new <canvas> tag supported by the latest Safari and by the latest alpha release (codenamed Deer Park) of Firefox.

It is very cool: it exposes a sophisticated 2D drawing API (comparable to Java2D, but without text support) to client-side JavaScript.

My demo is here. It uses the canvas tag to draw a quadratic bezier curve and allows you to drag the control point around to change the curve.

It doesn't work for me in Safari 1.3, but it does work in Deer Park (a.k.a.Firefox 1.1) Alpha1

Almost reason enough to download a new browser!

Update: In comments, Berndt Jung links to a version of my demo that does work in Safari. He takes the text out from inside the <canvas*gt; tags, since Safari always renders it. But mostly, he figured out that due to a bug (being fixed) , the quadraticCurveTo() method is not actually bound.. The workaround is to use quadraticCurveToPoint() instead, on Safari only.

5 Comments

I think you meant "FF", instead of "IE"? ;-)

Oops! I'll fix the title of the post!

Nice read. Keep it going. Spiderfriend333

Mmmm... Cross browser compatiblity goodness (works in Deer Park and Safari):

http://concisity.net/canvas.html

Books

ECMAScript 5 & HTML5!

"A must-have reference"
Brendan Eich,
creator of JavaScript

JavaScript graphics makes web programming fun again!

Read Less, Learn More

Comprehensive coverage of Ruby 1.8 and 1.9

"The New Most Important Ruby Book"
Peter Cooper,
rubyinside.com

The classic Java quick-reference

About

Advertising

Pages

Hosted By

Powered by Movable Type 4.21-en