Set an element to visible on click in JCanvas

Question

I have drawn an mage on the canvas using drawImage() and have set its visibility to false and i want it to be visible on click and mouseover. How do i do ? Thanks

Here's what i've written so far, but this doesn't work of course

$('#scene').drawImage({

            source:'files/gp/js/bigview/avg/aileav.png',
            name:'aileavg',
            x:198,
            y:76,
            width:110,
            height:106,
            fromCenter: false,
            layer: true,
            visible:false,              
            click:function(layer){
                visible:true
                }

    })  

Answer 1

Canvas does not work that way. A canvas is not an object container. It works like... well... a canvas. When you draw an image to a canvas, it stops being an image and starts being a collection of pixels.

When you want something to disappear from a canvas, you either have to erase it by overpainting it with something else or by erasing the whole canvas and drawing everything again except for that object.

Answer 2

In jCanvas, disabling layer visibility using the visible property will prevent that layer from being drawn (thus preventing it from responding to mouse events).

If you want the layer to be rendered invisible but still respond to events, the opacity property is the ideal solution. You should use the setLayer() method to update the value of the opacity property (setting it to 0 will render the image invisible). Note that you will need to call the drawLayers() method afterwards to render this change on the canvas.

$('#scene').drawImage({

    source: 'files/gp/js/bigview/avg/aileav.png',
    name: 'aileavg',
    x: 198,
    y: 76,
    width: 110,
    height: 106,
    fromCenter: false,
    layer: true,
    opacity: 0,          
    click: function (layer) {
        $(this).setLayer(layer, {
            opacity: 1
        })
        .drawLayers();
    }

});