Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Nico's Canvas Playground
branch: master

This branch is 5 commits behind quickleft:master

readme.md

ql_canvas()

A simple loading script for creating and manipulating canvas elements.

Usage

ql_canvas provides a minial interface for dealing with canvas elements with a minimal interface. It accepts an options hash and returns an object with functions and values related to your canvas element. It works best when assigned to varaible, like this:

var my_canvas = ql_canvas();

When you apply ql_canvas, two things happen:

  • A canvas element is created and inserted into the DOM as a child of the target option.
  • An object is returned with various interfaces for the canvas element.

Options

The options object tells ql_canvas everything it needs to know to contruct a canvas element with a 2D context. Here's a list of available options and their default values:

  • name
    • the id of the canvas element to be created
    • default - ql_canvas + current time
  • target
    • the element the canvas element is appended to
    • default - $('body')
  • width
    • canvas width
    • default - 200
  • height
    • canvas height
    • default - 200
  • style
    • a string of CSS to be applied to the canvas element
    • default - false
  • init:
    • a function applied to a callback queue and attached to the ql_canvas response object
    • default - false

Here's a sample options object:

var my_canvas = ql_canvas({
  height: 400,

  width: 400,

  init: function( ctx, $canvas, settings ){
    ctx.fillStyle = "magenta";
  }
});

The Interface

init( functions )

  • a callback ready function created by options.init 3 arguments are passed into this function be default: the canvas context, the canvas jquery selector, and the options object. Accepts functions as arguments, which are executed with the correct context.

chain( functions )

  • a function that creates callback chains with the same arguments as the init function.

clear( x, y)

  • clears the entire canvas based on passed in or default width and height

$

  • the canvas element's jquery selector

ctx

  • the canvas element's 2D context object

settings

  • the settings hash

License

It's MIT, yo

Something went wrong with that request. Please try again.