Javascript jquery画布图像大小覆盖

我有一个jQuery图像悬停，可以将图像从灰度更改为彩色

工作正常，如果图像是100px的话

位如果在CSS中我想将图像缩放到其边界容器的100%，如下所示

.class { display: inline-block; width: 250px; height: 250px; }
.class img { display: inline-block; width: 100%; height: auto; }

我有一个250像素宽的div，这个div里面的图像被缩放到100%

但是如果图像是500px宽的，它就缩小了。这很好，但当我将鼠标悬停在图像上，使其从黑白变为彩色时，彩色版本（我假设由画布重叠）显示的是500px图像，而不是250px版本

在下面的jquery中，我如何告诉画布覆盖是包含div的100%

$(".imglist a").hover(
    function() {
        var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        masky, maskwidth,
        image = new Image();

        image.src = this.getElementsByTagName('img')[0].src;
        canvas.width = image.width;
        canvas.height = image.height;
        canvas.style.position = 'absolute';
        masky = image.height;
        maskwidth = Math.sqrt(image.width * image.width + image.height * image.height);
        ctx.rotate(0.45);

        $(this).find('div').prepend(canvas);

        (function animate() {
            if (masky <= -(image.width / 2)) {
                return false;
            } else {
                masky -= 15;
                ctx.save();
                ctx.rect(0, masky, maskwidth, image.height);
                ctx.clip();
                ctx.rotate(-0.45);
                ctx.drawImage(image, 0, 0);
                ctx.restore();
                window.requestAnimFrame(animate, 0);
            }
        })();
    }, 
    function() {
        $(this).find('canvas').animate({opacity: 0}, 500, function() {
            $(this).remove();
        });
    }
);

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || 
    window.webkitRequestAnimationFrame || 
    window.mozRequestAnimationFrame || 
    window.oRequestAnimationFrame || 
    window.msRequestAnimationFrame || 
    function(callback, element) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

$（“.imglist a”）。悬停(
函数（）{
var canvas=document.createElement（'canvas'），
ctx=canvas.getContext（'2d'），
马斯基，马斯克维兹，
图像=新图像（）；
image.src=this.getElementsByTagName（'img'）[0].src；
canvas.width=image.width；
canvas.height=image.height；
canvas.style.position='绝对'；
masky=image.height；
maskwidth=Math.sqrt（image.width*image.width+image.height*image.height）；
ctx.旋转（0.45）；
$（this.find（'div'）.prepend（canvas）；
（函数animate（）{
如果（masky尝试将
宽度：100%
添加到画布：

canvas.style.width = '100%';

或者，使用jQuery：

$(canvas).css('width', '100%');