How to programatically change the background image of canvas in enyo

Question

This is the kind i made for canvas. I want when i click on left/right buttons, background image property of canvas should change.

enyo.kind({

    name:"enyo.sample.imagecanvas",
    kind:"Control",
    components:[
  {kind:"enyo.Control",tag:"img",name:"left",ontap:"lefttap",src:"assets/left_arrow.p ng",fit:true},

{kind:enyo.Control,tag:"canvas",name:"canvas",index:"0",attributes:{width:1000,height:650},fit:true,src:"assets/1.jpg"},

{kind:"enyo.Control",tag:"img",name:"right",ontap:"righttap",src:"assets/right_arrow.png",fit:true},

],
imgsrc:["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"],

lefttap:function(){
    var index=this.$.canvas.index;
    index++;
            if(index > 8){
                index = 0;
            }
    //how to change canvas background image.

},
righttap:function(){

}
})

Can anyone suggest how to do that?

Answer 1

I would use the drawImage method of the canvas context. Alternately, you could put the image in a div behind the canvas if you're going to be drawing other stuff on the canvas. Just set the background of the canvas to transparent.

See: http://www.html5canvastutorials.com/tutorials/html5-canvas-images/