How Do I Readjust A Canvas On Hover

See more:

Javascript

HTML

jQuery

i dynamically made a canvas as so:

function pageSetup() {
            var vDuration = 30;
            var vHeight = 280;
            var canvas = document.createElement('canvas');
                        canvas.id = "canvas0";
            canvas.width  = 60;
            canvas.height = vHeight;
            canvas.style.position = "absolute";

            for(var canCount = 0; canCount < vDuration; canCount++)
                        {
                                var ctx=canvas.getContext("2d");
                ctx.stroke();
                ctx.fillStyle="#FF0000";
                var topX = 0;
                var topY = canCount*(vHeight/vDuration);
                var botX = 40;
                var botY = topX + (vHeight/vDuration);
                ctx.fillRect(topX, topY, botX, botY);

                        }

It makes a canvas 280 pixels high and 30 wide. Within it, 30 rectangles are drawn in a vertical stack from top to bottom. Each has a width of 40. The total canvas width it 60 however.

What I want now is when the user hovers over one of these rectangles it expands (or rather theyre redrawn with a new one 60 pixels wide instead of 40 where the mouse is. For some reason the following wont work:

$(document).on("mouseover", "#canvas", function(e) {

              var ctx = $("#canvas0")[0].getContext('2d');
              ctx.fillStyle="#000000";
              ctx.fillRect(0,0,30,30 );

});

if i can get it to draw a rectangle on a user hover then i can just adjust where it draws the new extra length rectangle

Tried also:

$('#myCanvas').mousemove(function (e) {
    // Event location offset - the offset of the element = offset within layer
    var context = document.getElementById("canvasId").getContext("2d");
    context.clearRect(0,0,context..canvas.width,context.canvas.height);
    context.fillStyle="#000000";
    context.fillRect(0,0,50,50);

});