Depending on your goal, there are various ways to utilize LibCanvas for drawing images. If your aim is simply to draw an image, you can do so using plain context without creating a LibCanvas object:
var img = atom.dom.create( 'img', { src: 'images/draw.png' })
.bind( 'load', function () {
atom.dom( 'canvas' ).first
.getContext( '2d-libcanvas' )
.drawImage( img );
});
If your image disappears because it's not in the frame, another approach is to draw it in the "render" section:
new LibCanvas('canvas', {
preloadImages: { foo: 'images/draw.png' }
}).start(function () {
this.ctx.drawImage( this.getImage('foo') );
});
For more complex applications, consider creating a special object like this:
LibCanvas.extract();
var ImageDrawer = atom.Class({
Extends: DrawableSprite,
initialize: function (sprite, shape) {
this.sprite = sprite;
this.shape = shape;
}
});
new LibCanvas('canvas', {
preloadImages: { foo: 'images/draw.png' }
})
.start()
.addEvent('ready', function () {
var drawTo = new Rectangle( 0, 0, 100, 100 );
var drawer = new ImageDrawer( this.getImage('foo'), drawTo );
this.addElement( drawer );
});
To add interactivity, such as draggable functionality, to your drawings, you can implement it like this:
LibCanvas.extract();
var ImageDrawer = atom.Class({
Extends: DrawableSprite,
Implements: [ Draggable ],
initialize: function (sprite, shape) {
this.sprite = sprite;
this.shape = shape;
}
});
new LibCanvas('canvas', {
preloadImages: { foo: 'images/draw.png' }
})
.start()
.addEvent('ready', function () {
var drawTo = new Rectangle( 0, 0, 100, 100 );
var drawer = new ImageDrawer( this.getImage('foo'), drawTo );
this.addElement( drawer );
drawer.draggable();
});
Feel free to reach out for any further inquiries regarding LibCanvas at [email protected]