Firefox Logo Painted Using Firefox Browser

Posted by jun auza On 10/17/2009
One of the main features of Firefox 3.7 is its advanced support for multi-touch enabled devices. During the MozCamp and JRSL event in Chile, Marcio Galli painted the Firefox logo using a development build of Firefox, a touch screen laptop, a simple drawing application, and his finger. Here's the video of demo:


The drawing application as shown on the video was written in JavaScript utilizing less than 70 lines of code. To illustrate how simple the app is, here are most of the codes used:

var canvasctx = null;


function initCanvas(ww,hh)
{
gCanvas = document.getElementById("canvas");
var w = ww;
var h = hh;
gCanvas.style.width = w + "px";
gCanvas.style.height = h + "px";
gCanvas.width = w;
gCanvas.height = h;
canvasctx = gCanvas.getContext("2d");
canvasctx.clearRect(0, 0, w, h);
// imageData = gCtx.getImageData( 0,0,320,240);
}


var canvasctx = null;


function load() {


initCanvas(1200,800);

document.multitouchData=true;

}

gColor="0,0,0";


function color(rr,gg,bb) {
gColor = rr+","+gg+","+bb;
}

function listenTo(event) {
canvasctx.fillStyle='rgba('+gColor+',.1)';
canvasctx.beginPath();
canvasctx.arc(event.clientX, event.clientY, 20, 0, Math.PI*2, 1);
canvasctx.fill();
canvasctx.closePath();
}

document.addEventListener("MozTouchMove", listenTo, false);


If you own a touch-screen computer or laptop running Linux, Windows, or Mac, you can test the drawing application HERE. But first you have to download and install the development version of Firefox 3.7, which you can get HERE.

The stable version of Firefox 3.7 that will have full multi-touch support might be released in May-June 2010. It will utilize Gecko 1.9.3 engine.

Bookmark and Share

Related Posts:



Archive


"Action is the real measure of intelligence" ~Napoleon Hill

Twitter

Tumblr

Google +