I have a canvas element (canvas-mouse) that spans the whole screen - its purpose is to draw a 50% opacity circle around the mouse of a certain size (grabsize). Also on the page will be a number of images in divs. I want these images to be clickable/hoverable, but I also want the 50% opacity circle in canvas-mouse to appear on top of them.

Is there any way to accomplish this?

HTML:

<canvas id=canvas-mouse class=fullscreen></canvas>

<div class=object die><img src=images/Die_d6.svg></div>

CSS:

html, body {

    width:  100%;

    height: 100%;

    margin: 2px;

    overflow: hidden;

    color: #FFFFFF;

    background-color: #2C744C;

}



canvas.fullscreen {

    position: absolute;

    left: 0px;

    top: 0px;

    z-index: -1;

}



.object {

    position: absolute;

}



#canvas-mouse {

    z-index: 10;

}

JavaScript:

CanvasRenderingContext2D.prototype.drawCircle = function(xpos, ypos, radius, linewidth, linecolor, fill) {

    if(typeof(linewidth)===undefined) {

        linewidth = 1;

    }

    if(typeof(linecolor)===undefined) {

        linecolor = #000000;

    }



    this.beginPath();

    this.arc(xpos, ypos, radius, 0, 2*Math.PI, false);

    this.lineWidth = linewidth;

    if(typeof(fill)!==undefined) {

        this.fillStyle = fill

        this.fill();

    }

    this.strokeStyle = linecolor;

    this.stroke();

}

CanvasRenderingContext2D.prototype.maximize = function() {

    this.canvas.width = window.innerWidth;

    this.canvas.height = window.innerHeight;

}

mousectx = $(#canvas-mouse)[0].getContext(2d);

mousectx.maximize();



//Dice handlers

$(.object.die).hover(function() {

    //Hover event goes here

})

$(.object.die).mousedown(function() {

    //Click event goes here

})



//Mouse movement handler

$(document).mousemove(function(e){

    //Get the mouse positions and put them in {mouse}

    mouse.x = e.pageX;z

    mouse.y = e.pageY;



    //Redraw the grab circle

    mousectx.clearCanvas();

    mousectx.drawCircle(mouse.x,mouse.y,grabsize,1,#000000,rgba(0,0,255,0.5));

});

Thanks in advance.