Download oCanvas

Source files

To use oCanvas in your projects, just download the file from here. The production version is minified, which is great for production, but for development you might want the uncompressed source to easily find errors in your code.

Current release: 2.10.1

Production 21 kB minified & gzipped
Development 192 kB full source

For the complete source separated into modules, check out the GitHub page.

npm

You can install oCanvas from npm:

npm install --save ocanvas

In your code, import oCanvas like this:

// ES2015
import oCanvas from 'ocanvas';

// CommonJS
var oCanvas = require('ocanvas');

CDN hosted

oCanvas is also hosted at cdnJS. Using a CDN hosted version is a good idea, because of faster loading times and good caching.

To use the hosted version, just include this in your page:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ocanvas/2.10.1/ocanvas.min.js"></script>

Note: Please do not hotlink directly to the files hosted on ocanvas.org. Either link to the CDN version, or download local copies.

Bug reporting

Errors might happen, and they can sometimes point to the oCanvas source. Most often it is because of bad input data, and by using the development version of oCanvas you can see what part of oCanvas that gets an error, and that can make it easier for you to spot your error. If you really think you've found a bug in oCanvas, please report the issue on GitHub.

Browser support

oCanvas should work in most modern browsers with canvas support. With the release of version 2.0.0, Internet Explorer 9 and above is also supported. Touch devices such as iPhone and iPad are also supported. Android devices will probably work, but are not tested.

Changelog

oCanvas 2.10.1 | 2023-06-24 | Download: Production or Development or CDN

Bug fixes

Shadow state is no longer mistakenly shared across all display objects.

oCanvas 2.10.0 | 2018-07-18 | Download: Production or Development or CDN

New features

Border radius can now be set on rectangles (thanks @nestorrente!):
- borderRadius
- borderTopLeftRadius
- borderTopRightRadius
- borderBottomRightRadius
- borderBottomLeftRadius

oCanvas 2.9.1 | 2018-01-22 | Download: Production or Development or CDN

Bug fixes

Animating objects no longer pollute the global space with a props variable (thanks @Danscho!).

oCanvas 2.9.0 | 2017-07-09 | Download: Production or Development or CDN

New features

Objects can now be added and removed at specific indices using the following new functions (thanks @nestorrente!):
- core.addChildAt()
- core.removeChildAt()
- displayObject.addAt()
- displayObject.addChildAt()
- displayObject.removeChildAt() (not actually new, but listed for completeness)

oCanvas 2.8.10 | 2017-07-09 | Download: Production or Development or CDN

Bug fixes

Pointer hit detection now works properly for ellipse objects with a non-default origin.

oCanvas 2.8.9 | 2017-07-06 | Download: Production or Development or CDN

Bug fixes

The getOrigin method on ellipse objects is now calculating origin properly when radius_x and radius_y differ.

oCanvas 2.8.8 | 2017-06-01 | Download: Production or Development or CDN

Bug fixes

The scaleTo method on display objects is now setting the scaling properly.

oCanvas 2.8.7 | 2017-01-01 | Download: Production or Development or CDN

Bug fixes

The init function for custom display objects registered through canvas.display.register is now called properly when instantiating objects.

oCanvas 2.8.6 | 2016-10-23 | Download: Production or Development or CDN

Bug fixes

Timeline is now stopped when calling canvas.destroy() and won't cause side effects to the canvas element after being destroyed.

oCanvas 2.8.5 | 2016-07-22 | Download: Production or Development or CDN

Bug fixes

Properties are now correctly reset to default values internally before each object renders, which fixes and issue where properties were inherited from parent objects.

oCanvas 2.8.4 | 2016-04-22 | Download: Production or Development or CDN

Bug fixes

oCanvas now works better in cross-origin environments (before, it would in some cases throw an exception at load when DOM event listeners were added initially) (#124).

oCanvas 2.8.3 | 2015-12-06 | Download: Production or Development or CDN

Bug fixes

Sprites are now only redrawn if previously drawn.
Images and sprites no longer async load images if the provided image element is already loaded.

oCanvas 2.8.2 | 2015-12-03 | Download: Production or Development or CDN

Bug fixes

Cloning an image or sprite object where the image property is set to a DOM node should now work properly.

oCanvas 2.8.1 | 2015-08-25 | Download: Production or Development or CDN

Bug fixes

oCanvas.version is now correctly set to '2.8.1'. The versions 2.7.5 and 2.8.0 still had '2.7.4' as the value.

oCanvas 2.8.0 | 2015-08-24 | Download: Production or Development or CDN

New features

The following display objects now support clipping (hides the overflowing parts of child objects):
- arc
- ellipse
- image
- polygon
- rectangle
- sprite
Enable clipping by setting the clipChildren property of the object to true.

Thanks @nestorrente for the contribution!

oCanvas 2.7.5 | 2015-08-19 | Download: Production or Development or CDN

Bug fixes

Add support for custom easing functions (was documented, but not implemented for some reason).

oCanvas 2.7.4 | 2015-05-29 | Download: Production or Development or CDN

Bug fixes

The easing mode ease-in-out-bounce is now correctly calculated.

oCanvas 2.7.3 | 2014-07-16 | Download: Production or Development or CDN

Bug fixes

Stroke widths should support any numeric value, but was previously converted to an integer.

oCanvas 2.7.2 | 2014-06-18 | Download: Production or Development or CDN

Bug fixes

Images should now load correctly in IE, even SVG files.

oCanvas 2.7.1 | 2014-05-04 | Download: Production or Development or CDN

Bug fixes

Text objects will now cache what fonts have been loaded, so that it won't perform the loading for every object using the font. This reduces the amount of redraws.

oCanvas 2.7.0 | 2014-05-03 | Download: Production or Development or CDN

New features

The version of oCanvas can now be fetched from the code, using oCanvas.version.

Bug fixes

Text and image objects added to the canvas with the redraw flag set to false will no longer be automatically redrawn, unless previously drawn.

oCanvas 2.6.0 | 2014-02-22 | Download: Production or Development or CDN

New features

All 'remove' methods now take a second argument flag for deciding whether all should be redrawn. All 'add' methods already had this, but not 'remove' until now.
Scenes are now making use of the optimizations made possible by the redraw flag in 'add'/'remove'.

oCanvas 2.5.1 | 2013-09-17 | Download: Production or Development or CDN

Bug fixes

Fix problems with the clone method caused by previous version. (#88)
Set correct context (this) for event handlers on the core instance.
Prevent error in onCanvas method for mouse/touch, if there has not been any mouse/touch event yet.

oCanvas 2.5.0 | 2013-09-15 | Download: Production or Development or CDN

New features

Add support for custom events on canvas and display objects. See documentation for the trigger method (example).

Bug fixes

Fix positions for line ends when setting the length property.

oCanvas 2.4.1 | 2013-09-14 | Download: Production or Development or CDN

Bug fixes

Set correct position for cloned objects (cloning an object that already has a parent caused problems).
Respect cross-domain iframes for pointer events.
Fix high CPU usage in some animations (Firefox).

oCanvas 2.4.0 | 2013-02-19 | Download: Production or Development or CDN

New features

Add support for animating nested properties (such as coordinates for start or end points of a line), ex: line.animate({ start: { x: 50 } });
Add ability to set only one of x/y for start/end of a line, ex: line.start.x = 50;

Bug fixes

Line position is now set correctly if both start/end and length is specified directly when the object is created.

oCanvas 2.3.1 | 2013-01-13 | Download: Production or Development or CDN

Bug fixes

Quick fix for pointer event detection for the new way to create pie sections.

oCanvas 2.3.0 | 2013-01-13 | Download: Production or Development or CDN

New features

Add a better way to create pie chart sections, using the property pieSection.
Add support for specifying text line-height in pixels, instead of only a relative unit. It will work both in the short-hand font property ("12px/18px sans-serif") and as a property (text.lineHeight = "18px").

Bug fixes

Clear background completely on redraw. If the background was set to a transparent color, you would see that it wasn't really cleared before.
Fix incorrect color parsing for strokes. If a stroke value contained a gradient with color stop positions set, or where the colors within the gradient contained spaces, it would be parsed incorrectly.

oCanvas 2.2.2 | 2012-10-15 | Download: Production or Development or CDN

Bug fixes

Fix wrong pointer position for older webkit browsers, causing incorrect event detection etc.
Redraw canvas when sprite image file has been loaded. Until now the sprite was not drawn with the correct scaling among other things.

oCanvas 2.2.1 | 2012-08-03 | Download: Production or Development or CDN

Bug fixes

Pointer positions are now calculated correctly when the canvas element has been scaled with CSS.
Opacity will now affect children as well.

oCanvas 2.2.0 | 2012-07-20 | Download: Production or Development or CDN

New features

Rewrite of animation module to make it easier to maintain.
Switch to using requestAnimationFrame instead of setTimeout/setInterval in both object animations and main timeline.
Changed the easing functions to accept other arguments to allow for more creative easing functions.
Added lots of new easing functions.
New simpler syntax for animate().
Added reset() method to core instances.
Added destroy() method to core instances.
Added delay() method to display objects.

Bug fixes

Calculations for mouse events on lines are now calculated correctly even when the line is in a parent object.
If an event handler removes other event handlers, it will no longer generate an error.
Prevent error when calculating color stops in gradients.
Certain webkit versions no longer complain about reserved words.
Key events that were specified to have the default action prevented, were not always prevented in Safari.

Deprecated features

Old syntax for animate() will soon be removed and replaced by a new syntax.
Easing functions: "ease-in", "ease-out", "ease-in-out" (added other similar functions)
Default easing function "ease-in-out" is deprecated, and will soon be replaced by "ease-in-out-cubic".
The old way of passing only one argument to easing functions will be changed.
Default value for the fps option will soon be changed to 60.

oCanvas 2.1.1 | 2012-04-29 | Download: Production or Development or CDN

Bug fixes

Wrong event object was sent to keyboard event handlers, causing properties like which (keyCode) to be incorrect.
Cloning an object that was already added copied the added state and made it impossible to add the new object to canvas.
Animation method stop() was not working correctly, which also affected finish().
Line positions were accessed incorrectly causing errors.
Arcs with an angle difference of 360 degrees did not receive any pointer events.
Unbinding events on an object with no attached event handlers caused an error.
Trying to remove an object that hasn't been added yet no longer causes an error.

oCanvas 2.1.0 | 2012-04-01 | Download: Production or Development or CDN

New features

The core instance now has a children property just like display objects. All objects added directly to the core instance will have their parent property set to the core instance.
The dragAndDrop method will now accept the property bubble in its options object. If bubble is set to false, the events the method is using will stop propagating further out.
Display objects now have a property called added, which is true if the object has been added to another object. This does not mean it is going to be drawn. The property drawn is for checking that.
The draw module has a new property called isCleared. That will be true if the clear method has been called, and will be set to false again when the next redraw happens.

Bug fixes

The draw order mechanism has been refactored which will make zIndex behave more natural. Objects added as children to another object with a low zIndex, will never be drawn above objects with a higher zIndex. This also means the zIndex values are local to the parent's children, not the global draw stack.
Setting width or height of an object will no longer affect the width/height of its children. Scaling is used for this effect instead.
Touch positions are now correctly calculated when the page is scrolled.

Deprecated features

Property objects in the draw module is now deprecated due to the new structure of draw order mentioned above. It will be removed in the next major release.

oCanvas 2.0.0 | 2012-02-21 | Download: Production or Development or CDN

New features

Support for IE9 and above. The accessors have been fixed so IE9 is now supported. (See this post for more info about IE support)
Major rewrite of event system. Events are now only triggered for the front object for the current pointer position. Event propagation has also been implemented.
The whole event system can now be switched off/on for the current core instance.
New event types: dblclick and dbltap
New property pointerEvents for display objects, which when set to false ignores events for that object and passes them through to the object underneath.
Layering for objects, using the property zIndex.
Drag and drop functionality can now be set to automatically switch zIndex for the objects, so the object being dragged always changes to be on top.
Generated sprites can now be limited to a specific number of frames, using the numFrames property.
Adding an object to the canvas can now be done without redrawing automatically, by passing false to the method (canvas.addChild(obj, false) or obj.add(false)).
Cloning an object will now also clone its children.
Animations can now be stopped using the new method finish(), which apart from stopping also sets all final values.
Multiple animations at the same time, for the same object, are now possible.

Bug fixes

Prevention of default actions for key events have been fixed so you now specify manually which keys should have the actions prevented for.
Keypress event now allows multiple keys at the same time.
When requesting the keys that are currently pressed down, the keycodes were numbers, but typed as strings. It is now changed to real numbers.
Mouse positions are now calculated correctly when the page is scrolled.
Text baselines are now consistent across browsers.
Multi-line text objects with a line-height other than 1 are now drawn correctly.
Text objects with align set to something else than default no longer moves the object, but only affects the text content in multi-line texts.
Dimensions for multi-line text are now calculated properly, which also fixes events.
Positions for line end points are now correctly calculated.
Drag and drop positions are now calculated correctly when the parent object has a rotation.
Pointer events are now better calculated for line and arc objects.
Stroke values are now parsed correctly.
Gradients in strokes for radial objects are now positioned correctly.
Gradients are now recalculated when the canvas is resized (by setting width/height of the core instance, not by changing the canvas size manually).
Scaling will now work properly on nested objects.
Cloning an image object no longer results in an error.
Arc objects are no longer trying to redraw when the start and end angles are the same.
Multiple animations at the same time no longer mixes up the timers.
Sprite methods no longer conflicts with the normal animation methods. (startAnimation() and stopAnimation() have been introduced for sprites)
The domReady method is now more stable.
The properties layerX and layerY in event objects have been removed, since they are now deprecated.

oCanvas 1.0.0 | 2011-03-19 | Download: Production or Development or CDN

Initial release