dynamoCanvas

View the Project on GitHub iwhitcomb/dynamocanvas

dynamoCanvas is a jQuery plugin designed to make it as simple as possible to utilize all of the features of the HTML5 canvas tag.

Features

Minimum Requirements

Only browsers that support HTML5 and the canvas tag will work with dynamoCanvas.

Documentation

Getting Started

Download the latest version of jQuery and the dynamoCanvas plugin, and place them into the <head> section of your HTML using <script> tags.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dynamocanvas.js"></script>

Initializing the Plugin

Create a canvas element inside the <body> section of your HTML.

<canvas id="demo" width="400" height="400" />

Inside the <head> section of your HTML create a new script that uses the dynamoCanvas() function to initialize the canvas.

<script type="text/javascript">
$(document).ready(function () {
  var canvas = $('#demo').dynamoCanvas();
});
</script>

Drawing

Lines

line(x1, y1, x2, y2, properties)

Example
<script type="text/javascript">
$(document).ready(function () {
  var canvas = $('#demo').dynamoCanvas().line(10, 10, 380, 200, {
    color : 'blue',
    width : 10
  });
});
</script>

View the Example

Rectangles

rect(x1, y1, x2, y2, properties)

Example
<script type="text/javascript">
$(document).ready(function () {
  var canvas = $('#demo').dynamoCanvas().rect(10, 10, 380, 200, {
    background : 'blue',
    borderColor : 'red',
    borderWidth : 10
  });
});
</script>

View the Example

Circles

circle(x, y, radius, start, stop, properties)

Example
<script type="text/javascript">
$(document).ready(function () {
  var canvas = $('#demo').dynamoCanvas().circle(200, 200, 100, 0, 360, {
    background : 'blue',
    borderColor : 'red',
    borderWidth : 10
  });
});
</script>

View the Example

Shapes

shape(coords, properties)

Example
<script type="text/javascript">
$(document).ready(function () {
  var canvas = $('#demo').dynamoCanvas().shape([
    {x:0, y:0},
    {x:200, y:150},
    {x:100, y:200},
    {x:0, y:0}
  ], {
    background : 'blue',
    borderColor : 'red',
    borderWidth : 10
  });
});
</script>

View the Example

Text

text(text, x, y, properties)

Example
<script type="text/javascript">
$(document).ready(function () {
  var canvas = $('#demo').dynamoCanvas().text('Hello world!', 100, 100, {
    color : 'blue',
    fontFamily : 'Arial',
    fontStyle : 'bold',
    fontSize : '30px',
    borderColor : 'red',
    borderWidth : 2,
    baseline : 'bottom'
  });
});
</script>

View the Example

Images

text(url, x, y, properties)

Example
<script type="text/javascript">
$(document).ready(function () {
  var canvas = $('#demo').dynamoCanvas().image('img/monalisa.jpg', 10, 10, {
    width : 100,
    height : 100
  });
});
</script>

View the Example

Gradients

Gradients may be used as properties of other objects on the canvas, not as objects themselves. For example, the background of a rectangle or the color of text.

Linear

linearGradient(x1, y1, x2, y2, stops)

Example
<script type="text/javascript">
$(document).ready(function () {
  var canvas = $('#demo').dynamoCanvas();
  canvas.rect(10, 10, 380, 200, {
    background : canvas.linearGradient(10, 10, 380, 200, [
      {position:0, color:'red'},
      {position:.5, color:'green'},
      {position:1, color:'blue'}
    ]),
  });
});
</script>

View the Example

Radial

radialGradient(x1, y1, r1, x2, y2, r2, stops)

Example
<script type="text/javascript">
$(document).ready(function () {
  var canvas = $('#demo').dynamoCanvas();
  canvas.circle(200, 200, 200, 0, 360, {
    background : canvas.radialGradient(200, 200, 0, 200, 200, 200, [
      {position:0, color:'red'},
      {position:.5, color:'green'},
      {position:1, color:'blue'}
    ]),
  });
});
</script>

View the Example

Layers

Layers allow for the unlimited nesting of canvases within other canvases. This feature may be used to store different information on separate layers for more complex drawing, then compile them onto the main canvas for output.

Note: Layers can be taxing on system resources and may cause slower render times where many layers are being used.

Creating Layers

newLayer(options)

Example
<script type="text/javascript">
$(document).ready(function () {
  var canvas = $('#demo').dynamoCanvas();
  canvas.newLayer();
  canvas.layers[0].rect(100, 100, 200, 200);
  canvas.flatten();
});
</script>

View the Example

Operations

Layer operations may be used to draw more complex shapes by combining simple shapes and applying a layer operation.

Note: Layer operations only affect the nested canvases and can only be stacked within groups of layers.

Example
<script type="text/javascript">
$(document).ready(function () {
  var canvas = $('#demo').dynamoCanvas();
  canvas.newLayer({op : 'xor'}).newLayer();
  canvas.layers[0].layers[0].rect(100, 100, 200, 200, {background : 'red'});
  canvas.layers[0].circle(100, 100, 100, 0, 360, {background : 'blue'});
  canvas.flatten();
});
</script>

View the Example

Flatten

flatten()

Flattening layers will compile all nested layers onto the flattened layer. It is necessary to flatten a canvas when displaying on the page in order to see all of its layer data.

Bug: Images placed using the image() method and nested more than one layer deep from the flattened layer may be lost.

Encoding

encode()

Encoding a canvas will return the canvas data as a base64 encoded PNG for output as an image.

Example

<script type="text/javascript">
$(document).ready(function () {
  var canvas = $('#demo').dynamoCanvas();
  canvas.rect(100, 100, 200, 200, {background : 'red'});
  $('body').append($('').attr({src : canvas.encode()}));
});
</script>

View the Example

Support

All support requests should be sent to support@w3dynamo.com.

Download

git clone git@github.com:iwhitcomb/dynamocanvas.git dynamocanvas