gee.js is not being maintained.

Totally deprecated. I recommend paper.js instead. I'll be keeping this page around because I think the documentation is cool. — george

gee.js is a library that makes it quick to start sketching with the HTML5 <canvas>.

Creating a fullscreen 2D <canvas>

<script type="text/javascript" src="gui.min.js"></script>
<script type="text/javascript">
 
window.onload = function() {
 
   var g = new GEE( { fullscreen: true } );
   
   g.draw = function() {
   
      g.ctx.clearRect( 0, 0, g.width, g.height );
      g.ctx.fillText( g.frameCount, 10, 10 );
      
   };
   
   g.mousedrag = function() {
   	
      g.ctx.beginPath();
      g.ctx.moveTo( g.pmouseX, g.pmouseY );
      g.ctx.lineTo( g.mouseX, g.mouseY );
      g.ctx.stroke();
   	
   };

};

</script>

Passing the parameter fullscreen:true to GEE's constructor automatically removes padding/margin from the HTML document and appends a <canvas> to the body that scales with the window.

You can override event properties such as draw and mousedrag to implement the behavior of your choosing. A complete list of GEE's properties are below.

Parameters for GEE's constructor

var g = new GEE( { width: 600, height: 480, container: document.body } );

// … does the same thing as …

var g = new GEE( { width: 600, height: 480 } );
document.body.appendChild( g.domElement );

var g = new GEE( { width: 200, 
                   height: 200, 
                   context: 'experimental-webgl',
                   container: document.getElementById( 'canvas-holder' ),
                   fallback: function() { alert( "You don't have WebGL." ) }
                   } );
context
type of rendering contexte.g. '2d' or 'experimental-webgl' — defaults to '2d'
fullscreen
if true, automatically removes padding/margin from the HTML document and appends a <canvas> to the body that scales with the window.If true, ignores following parameters — defaults to false
container
DOM element to which we append the <canvas> elementIf you don't specify this parameter, you need to manually append the GEE domElement property to another DOM element on the page.
width
initial width of the <canvas> element
height
initial height of the <canvas> element
fallback
fires if something goes wrong

Properties of a GEE object

// a GEE object has lots of properties.

// Some you can set …
g.frameRate = 30;
g.height = 200;
g.mousedown = function() { console.log( 'You pressed the canvas' ) };
g.keydown = function() { console.log( 'You pressed ' + g.key ) };
g.loop = false;


g.draw = function() {

   // Some you just read …
   
   if ( g.mouseX > g.width/2 ) {
      g.ctx.fillRect( g.mouseX, g.mouseY, 10, 10 );
   }
	
}

Below is a list of all of GEE's properties. The  lock  indicates that a property is read-only.

ctx
current rendering context
domElement
the DOM <canvas> element
width
current width of the <canvas> element
height
current height of the <canvas> element
frameRate
sets desired frames per second
returns actual frames per second
frameTime
sets desired milliseconds per frame
returns actual milliseconds per frame
frameCount
number of frames drawn
draw
fires every frame, as long as the <canvas> is visible
mousedown
fires when the mouse is pressed on the <canvas>
mouseup
fires when the mouse is released from the <canvas>
mousemove
fires while the mouse is moving over the <canvas>
mousedrag
fires while the mouse is dragged over the <canvas>
mouseover
fires once the mouse enters the <canvas>
mouseout
fires once the mouse exits the <canvas>
keydown
fires while a key is supressed If the key is held down then keydown will execute repeatedly.
keyup
fires when a key is released
mouseX
the x position of the mouse0 is the left side of the <canvas> element.
mouseY
the y position of the mouse0 is the top of the <canvas> element.
pmouseX
the previous x position of the mouse
pmouseY
the previous y position of the mouse
key
the character that was last pressed
keyCode
the integer that represents the key that was last pressed
keyPressed
true if a key is pressed
mousePressed
true if the mouse is pressed
loop
if true, draw is fired repeatedly loop is true by default.