Lightweight javascript canvas plugin. Live demo.

cMove allows you to add shapes to canvas and manipulate them like an objects. Current version of plugin has only one not hard dependency: hand.js. Hand.js is a polyfill for supporting pointer events on every browser. Not hard dependency means that you can use your own event listeners.

• Supports mobile devices
• Animation with RequestAnimationFrame
• Retina support for all shapes
• Uses pointer events
• Very configurable and flexible - easy to extend for your needs

Plugin has included two shapes by default: rectangles and pictures. If you need other shapes you can add it with ease. Anyway I am planning to add library of shapes and plugin's builder with shapes that you needed, to decrease the size of plugin.

Just include hand.js and cmove.js from dist folder (or from lib for not minified versions) in your html:

<script src="dist/hand-1.3.8.js"></script>
<script src="dist/cmove.js"></script>

After that you can add:

var canvas = document.getElementById('canvas'),
    mc = new cMove.MyCanvas(canvas);
    
mc.addShape(new cMove.Rectangle(mc, {
    x: 20,
    y: 30,
    w: 70,
    h: 50,
    fill: 'rgba(1,118,200,.7)'})
);
mc.addShape(new cMove.Picture(mc, {src: 'i/jewels/drop.png', x: 30, y: 120, selectable: false}));

Canvas will take 100% of parent element. Plugin returns global config, shapes constructors and constructor for canvas.

State of your canvas. All magic happens here.
MyCanvas's properties:
canvas, width, height, ctx, ratio, shapes, rectangles, pictures, dragging, selection, dragoffx, dragoffy

Type: Element
Required

Type: Object
Optional

All options that you pass to this object will be available through myCanvas[option] in MyCanvas constructor.

Rectangle's properties:
x, y, initX, initY, w, h, fill, stroke, strokeWidth, selectable, draggable, type, myCanvas

Instance of MyCanvas constructor.

Type: Object

Type: Integer
Default: 0

Position of top-left corner. Initial coords is available in Rectangle.initX and Rectangle.initY properties.

Type: Integer
Default: cMove.config.RECTANGLE_WIDTH and cMove.config.RECTANGLE_HEIGHT

Size of shape.

Type: String Color
Default: null

Color of fill and stroke of shape.

Type: Integer
Default: cMove.config.RECTANGLE_STROKE_WIDTH

Type: Boolean
Default: True

Local version of cMove.config.SHAPES_SELECTION (for current shape only).

Type: Boolean
Default: True

Shape is draggable if true.

Type: String
Default: rectangle

Type of the shape.

In process...

Type: Integer
Default: 50

Default width and height for rectangle.

Type: Integer
Default: 1

Default stroke width for rectangle.

Type: Boolean
Default: true

There is a stroke around selected shape if true.

Type: String Color
Default: #ffca4b

Color of selection's stroke.

Type: Integer
Default: 2

Default stroke width for selection shape.

Type: Boolean
Default: true

Selected shape is on top others if true.

Type: Boolean
Default: true

Shapes can't move out of canvas if true.

Type: Boolean
Default: false

Set true if you use retina images.

Type: String null Default: x2 and x3

Path to your retina images. You can pass null if you don't have retina images for ratio = 2 or ratio = 3.