Question

Im am currently using LibCanvas to do canvas drawing in my html page, but I can’t seem to figure out how to draw an image. Can anyone help me with this?

http://libcanvas.github.com/

EDIT: I am currently using this piece code, I see the image being drawn but then it dissapears;

var libcanvas = new LibCanvas('canvas', { preloadImages: false }).start();

var img = new Image();
img.src = 'images/draw.png';
img.width = 400;
img.height = 400;

libcanvas.addEvent('ready', function()
{
   libcanvas.ctx.drawImage(img);
});

Answer 1

It depends on your aim.
If you just want to draw image – you can use plain context, without creating LibCanvas object:

var img = atom.dom.create( 'img', { src: 'images/draw.png' })
    .bind( 'load', function () {
        atom.dom( 'canvas' ).first
            .getContext( '2d-libcanvas' )
            .drawImage( img );
    });

Your image dissapears because you draw it not in frame. So, second way – is to draw it in “render” part:

new LibCanvas('canvas', {
    preloadImages: { foo: 'images/draw.png' }
}).start(function () {
    this.ctx.drawImage( this.getImage('foo') );
});

The right way if you try to create big app – is creating special object:

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 );
});

In such way you can easy make it, e.g. draggable:

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();
});

For answers about LibCanvas you can write to me, [e-mail]