resize images with canvas - css overflow issue

Question

Hi,

I'm working on a Javascript image resizing feature which rely on the IE only DXImageTransform addon.

Wanting to address modern browsers as well, I gave a shot to canvas, with pretty good results.

However, I face an issue in my resize function, which is the following:

function Resize(oObj, flMultiplier)
{       
  var canvas = document.getElementById('canvas');
  var canvasContext = canvas.getContext('2d');

  oObj.style.visibility = 'hidden';

  canvasContext.clearRect(0,0,canvas.width,canvas.height); // clear canvas
  canvasContext.fillStyle = 'rgba(0,0,0,0.4)';
  canvasContext.scale(flMultiplier,flMultiplier);
  canvasContext.drawImage(oObj, 0, 0);
}

If my image becomes bigger than the canvas item, then one will see only a portion of the image, which is bad.

I tried to tweak the canvas size at runtime, but if affects the display of the resized image.

So I ended up declaring a big canvas element, which is pretty OK, except that the css overflow of my web page is adjusted on my biggest element, and not on my resized image, which is a pain.

So I guess there are two ways to solve my problem:

1. Try to exclude the big canvas element from the overflow scheme
2. Try to update the canvas element size when resizing (I may have missed something there)

Answer 1

I haven't tried that myself, but perhaps you can create a canvas element out of the Dom, with document.createElement. It could be of arbitrary size without disturbing the display.

Now, I lack context (why do you resize images this way instead of using width and height attributes, among other questions) so maybe I am missing the point.