Remove image of a canvas element

Question

I'm using a canvas to create a multiply effect (with a blue triangle) when hover over an image.

The problem is that the image that is static is automatically fitted to its container but the image that is inside the canvas it's bigger, although the triangle it's right size.

Is it posible to remove the image that's inside the canvas leaving just the blue triangle... so the hover looks without the bigger image? how can I do it?

This is my canvas code:

    function to_canvas(im,w,h){
        var isIE8 = $.browser.msie && +$.browser.version === 8;
        var canvas;
        var imageBottom;
        var im_w = w;
        var im_h = h;
        var imgData;
        var pix;
        var pixcount = 0;
        var paintrow = 0;
        var multiplyColor = [70, 116, 145];
        var x_offset = Math.floor(($('#'+im).attr('width') - im_w)/2);
        var y_offset = Math.floor(($('#'+im).attr('height') - im_h)/2);
        if ( isIE8 ) {
            $('<div />' , {
                'id' : 'div-'+im,
                'class' : 'pseudo_canvas'
            }).css({
                'width' : im_w,
                'height' : im_h
            }).insertBefore('#'+im);
            $('#'+im).appendTo('#div-'+im).fadeIn();
            $('<img>' , {
                'src' : '/img/blueborder.png',
                'class' : 'blueborder'
            }).css({
            }).insertBefore('#'+im);
            $('#'+im).appendTo('#div-'+im).fadeIn();

        }else{
            imageBottom = document.getElementById(im);
            canvas = document.createElement('canvas');
            canvas.width = im_w;
            canvas.height = im_h;
            imageBottom.parentNode.insertBefore(canvas, imageBottom);
            ctx = canvas.getContext('2d');
            ctx.drawImage(imageBottom, -x_offset , -y_offset);
            imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
            pix = imgData.data;
            for (var i = 0 ; i < pix.length; i += 4) {
                if(pixcount > im_w - (im_h - paintrow) ){
                    pix[i  ] = multiply(multiplyColor[0], pix[i  ]);
                    pix[i+1] = multiply(multiplyColor[1], pix[i+1]);
                    pix[i+2] = multiply(multiplyColor[2], pix[i+2]);
                }
                if(pixcount < im_w-1){
                    pixcount++;
                }else{
                    paintrow++;
                    pixcount = 0;
                }
            }
            ctx.putImageData(imgData, 0, 0);
            /* $('#'+im).remove(); */
        }
    }
    function multiply(topValue, bottomValue){
        return (topValue + 50) * bottomValue / 255;
    }

With this script:

    $(window).load(function(){
        $('.featured_img img').each(function(index){
            var randval = (index+1)*0;
            var _this = $(this)
            setTimeout(function(){
                _this.attr('id' , 'banner' + index);
                to_canvas('banner' + index, 620, 344);
            }, randval)
        })
    });

This is the problem (bigger image on hover, the blue multiply triangle has the right size though):

And this is the markup (the images will always have different sizes, that's why it's auto fit to the container):

        <div class="featured_img">
            <img class="fittobox" src="img/slide2.jpg" alt="quisom1" width="843" height="390" />
        </div>

Answer 1

you can change this:

else{
        imageBottom = document.getElementById(im);
        canvas = document.createElement('canvas');
        canvas.width = im_w;
        canvas.height = im_h;
        imageBottom.parentNode.insertBefore(canvas, imageBottom);
        ctx = canvas.getContext('2d');
        ctx.drawImage(imageBottom, -x_offset , -y_offset);
        imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
        pix = imgData.data;
        for (var i = 0 ; i < pix.length; i += 4) {
            if(pixcount > im_w - (im_h - paintrow) ){
                pix[i  ] = multiply(multiplyColor[0], pix[i  ]);
                pix[i+1] = multiply(multiplyColor[1], pix[i+1]);
                pix[i+2] = multiply(multiplyColor[2], pix[i+2]);
            }
            if(pixcount < im_w-1){
                pixcount++;
            }else{
                paintrow++;
                pixcount = 0;
            }
        }
        ctx.putImageData(imgData, 0, 0);
        /* $('#'+im).remove(); */
    }    

for

else{
        imageBottom = document.getElementById(im);
        canvas = document.createElement('canvas');
        canvas.width = im_w;
        canvas.height = im_h;
        imageBottom.parentNode.insertBefore(canvas, imageBottom);
        ctx = canvas.getContext('2d');
        //set canvas image to the same size and position of '.featured_img im'
        //ctx.drawImage(IMAGE, TOP, LEFT, WIDTH, HEIGHT);
        ctx.drawImage(imageBottom, parseFloat($('#'+im).css('left')),parseFloat($('#'+im).css('top')),$('#'+im).attr('width'),$('#'+im).attr('height'));
        imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
        pix = imgData.data;
        for (var i = 0 ; i < pix.length; i += 4) {
            if(pixcount > im_w - (im_h - paintrow) ){
                pix[i  ] = multiply(multiplyColor[0], pix[i  ]);
                pix[i+1] = multiply(multiplyColor[1], pix[i+1]);
                pix[i+2] = multiply(multiplyColor[2], pix[i+2]);
            }
            if(pixcount < im_w-1){
                pixcount++;
            }else{
                paintrow++;
                pixcount = 0;
            }
        }
        ctx.putImageData(imgData, 0, 0);
}    

ctx.drawImage(); can set image width and height like
ctx.drawImage(image,x,y,width,height);