Friday, September 16th, 2005

Canvas Examples for Firefox 1.5

Category: Browsers, Canvas, Firefox

With Firefox 1.5 Alpha 2, Firefox includes a new
HTML element for programmable graphics. <canvas> is based on the WhatWG canvas specification, which itself is based on Apple’s <canvas> implemented in Safari. It can be used for rendering graphs, UI elements, and othercustom graphics on the client.

<canvas> creates a fixed size drawing surface that exposes one or more rendering contexts. We’ll focus on the 2D rendering context (incidentally, the only currently defined rendering context). In the future, other contexts may provide different types of rendering; for example, it is likely that a 3D context based on OpenGL ES will eventually be added to the <canvas> specification.

The article, Drawing Graphics with Canvas gives examples of simple 2D rendering, using paths, graphics state, and discusses issues such as compatibility with Apples implementation.

Code Example using Paths

<html>
 <head>
  <script type="application/x-javascript">
function draw() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  ctx.fillStyle = "red";

  ctx.beginPath();
  ctx.moveTo(30, 30);
  ctx.lineTo(150, 150);
  ctx.quadraticCurveTo(60, 70, 70, 150);
  ctx.lineTo(30, 30);
  ctx.fill();
}
   </script>
 </head>
 <body onload="draw()">
   <canvas id="canvas" width="300" height="300"></canvas>
 </body>
</html>

State Example

mozilla-canvas-example.png

Posted by Dion Almaer at 7:28 am
8 Comments

+++--
3.9 rating from 10 votes

8 Comments »

Comments feed

Totally unrelated, but I keep getting JS errors like this on this blog (using Firefox):

Error: mailtoAjaxians is not defined
Source File: http://www.ajaxian.com/archives/2005/09/canvas_examples.html
Line: 398

Comment by Tom — September 16, 2005

This is exciting to see this being supported! But are the implementations across browser/platform going to be consistent? I’d be nervous that creating web-apps using this would just be another headache to make it work cross platform.

But anyway, it’s fun to see the new possibilites. JavaScript is so much fun to program in, and now that OpenGL-style graphics are becoming available it just keeps getting better.

Comment by weedmansteve — September 16, 2005

Tom –

Thanks for pointing that out.

Should be fixed now!

Cheers,

Dion

Comment by Dion Almaer — September 16, 2005

I made a fractal explorer (Mandelbrot & Julia Sets) using canvas, works on Safari 1.3/2.0 and Firefox 1.5b:
http://www.wirelesshamster.com/cosas/canvas_mandelbrot_julia_set.html

Be careful with the detail level though, it can be pretty slow if you raise it too much!

Comment by Ignacio Garcia — October 9, 2005

I made an example javascript object which uses the canvas to draw decorative borders to any element: http://www.agustinfernandez.com.ar/proyectos/canvas/

Comment by Agustín Fernández — November 6, 2005

Can be used to draw simple 2 dimensional plots of data? I found an example within the JAVA documentation for a sin graph for example. Is this possile in the Firefox implementation and where would I find examples or full documentation for the . Thanks

Comment by Robert Cudmore — November 12, 2005

dfgdfgdgd fghfgghf fgfghfghf

Comment by Amruta — January 24, 2006

looks too complicated!

Comment by anonymous — May 1, 2006

Leave a comment

You must be logged in to post a comment.