goo.js - The HTML5 Canvas API Simplified

by John Robinson - Visit my blog

A self-contained microlibrary intended to simplify drawing and event handling with the HTML5 canvas object.


Note: This library does not implement a scene graph or provide higher level drawing abstractions. It provides a canvas wrapper object that takes out some of the grunge work of dealing with the HTML5 canvas object.

Demo: Try dragging your mouse around...

Get It!

• Download the minified source [3kb]
• Goo on GitHub!

More Samples

• Goo Events!
• Fullscreen
• Goo Racer
• Timed Animation

Creating a Fullscreen 2D Canvas

<script type="text/javascript" src="goo.min.js"></script>
<script type="text/javascript">
 
window.onload = function() {
 
 var g = new Goo({ fullscreen: true,
  userData: {startAngle: 0},
  onDraw: function(g) {
    var canvas = g.canvas;
    var ctx = g.ctx;
    ctx.clearRect(0, 0, g.width, g.height);

    // Draw a sun-like figure by rotating and adding rectangles in a loop
    ctx.globalAlpha = 0.20;
    var n = 5;
    var a = g.userData.startAngle + ((2* 3.1415) / n);
    var s = ((canvas.width < canvas.height)?canvas.width:canvas.height)/2;
    for (var i = 0; i < n; i++) {
      ctx.save();
      ctx.beginPath();
      ctx.translate(canvas.width/2, canvas.height/2);
      ctx.rotate(i * a);
      ctx.translate(-s/2,-s/2);
      ctx.rect(0, 0, s, s);
      ctx.fillStyle="#E30B5D"; // raspberry
      ctx.fill();
      ctx.stroke();
      ctx.restore();
    }
  },
  onMouseDrag: function(g) {
    var delta = (g.mouseX - g.prevMouseX) + (g.mouseY - g.prevMouseY);
    g.userData.startAngle += ((delta * Math.PI) / 180) / 2;
  }
  });
};

</script>

Passing the property fullscreen:true into the Goo's constructor will append a canvas element to the document body that will be resized with the window.

You can override the event properties such as onDraw and onMouseDrag to implement your own application logic and drawing code. A complete list of Goo's properties and events are shown below.

---

Construction properties for Goo's constructor

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

// Does the same thing as ...

var g = new Goo( { width: 800, height: 600 } );
document.body.appendChild( g.canvas );

type

type of rendering contextdefaults to '2d'

onFailure

fires if the canvas's ctx can't be created

fullscreen

if true, appends a canvas to the document body that will be resized with the window.If true, the remaining construction properties will be ignored. defaults to false

---

container

DOM element to which the canvas element is appendedIf not specified, the Goo's canvas property must be manually appended to another DOM element on the page.

width

initial width of the canvas element

height

initial height of the canvas element

---

Runtime properties of a Goo object

ctx

the canvas's rendering context

canvas

the canvas's DOM element

---

userData

empty placeholder object for storing user data

---

width

current width of the canvas element

height

current height of the canvas element

mouseX

the x position of the mouse relative to the canvas element

mouseY

the y position of the mouse relative to the canvas element

prevMouseX

the previous x position of the mouse

prevMouseY

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

---

keysDown

array of values indexed by keyCode true if a key is pressed

---

animate

if true, the onDraw event is fired repeatedly animate is true by default.

---

fps

frames per second (framerate)

---

onDraw

fires every frame, as long as the canvas is visible. Put your drawing code here.

onMouseDown

fires when the mouse is pressed on the canvas

onMouseUp

fires when the mouse is released from the canvas

onMouseMove

fires while the mouse is moving over the canvas

onMouseDrag

fires while the mouse is dragged over the canvas

onMouseOver

fires once the mouse enters the canvas

onMouseOut

fires once the mouse exits the canvas

onKeyDown

fires while a key is held down If the key is held down then keydown will execute repeatedly.

onKeyUp

fires when a key is released

onKeyPress

fires when a key is pressed

onFrameRate

fires periodically when the framerate is recalculated (approximately 1/s)

---