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
Related Content:
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
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.
Tom -
Thanks for pointing that out.
Should be fixed now!
Cheers,
Dion
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!
I made an example javascript object which uses the canvas to draw decorative borders to any element: http://www.agustinfernandez.com.ar/proyectos/canvas/
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
dfgdfgdgd fghfgghf fgfghfghf
looks too complicated!