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.4.0
Production 20 kB minified & gzippedDevelopment 177 kB full source
For the complete source separated into modules, check out the GitHub page.
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="http://cdnjs.cloudflare.com/ajax/libs/ocanvas/2.4.0/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.4.0 (released 2013-02-19)
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 (released 2013-01-13)
Bug fixes
- Quick fix for pointer event detection for the new way to create pie sections.
oCanvas 2.3.0 (released 2013-01-13)
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 (released 2012-10-15)
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 (released 2012-08-03)
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 (released 2012-07-20)
New features
- Rewrite of animation module to make it easier to maintain.
- Switch to using
requestAnimationFrameinstead ofsetTimeout/setIntervalin 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
fpsoption will soon be changed to60.
oCanvas 2.1.1 (released 2012-04-29)
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
addedstate and made it impossible to add the new object to canvas. - Animation method
stop()was not working correctly, which also affectedfinish(). - 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 (released 2012-04-01)
New features
- The core instance now has a
childrenproperty just like display objects. All objects added directly to the core instance will have theirparentproperty set to the core instance. - The
dragAndDropmethod will now accept the propertybubblein 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 propertydrawnis for checking that. - The draw module has a new property called
isCleared. That will be true if theclearmethod 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
objectsin 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 (released 2012-02-21)
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:
dblclickanddbltap - New property
pointerEventsfor 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
numFramesproperty. - Adding an object to the canvas can now be done without redrawing automatically, by passing
falseto the method (canvas.addChild(obj, false)orobj.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 (released 2011-03-19)
- Initial release