https://github.com/vladikoff/ql_canvas

Nico's Canvas Playground
https://github.com/vladikoff/ql_canvas

Last synced: 14 days ago
JSON representation

Nico's Canvas Playground

• Host: GitHub
• URL: https://github.com/vladikoff/ql_canvas
• Owner: vladikoff
• Created: 2011-03-20T04:53:23.000Z (almost 14 years ago)
• Default Branch: master
• Last Pushed: 2011-03-20T03:13:58.000Z (almost 14 years ago)
• Last Synced: 2024-10-19T00:27:18.400Z (3 months ago)
• Language: JavaScript
• Homepage: http://quickleft.github.com/ql_canvas
• Size: 784 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# 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