cambiar el tamaño de las imágenes con lienzo - problema de desbordamiento de CSS

Question

Estoy trabajando en una función de cambio de tamaño de imágenes de JavaScript que se basa en el complemento DXImageTransform exclusivo de IE.

Queriendo abordar también los navegadores modernos, probé el lienzo, con resultados bastante buenos.

Sin embargo, tengo un problema en mi función de cambio de tamaño, que es el siguiente:

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);
}

Si mi imagen se vuelve más grande que el elemento del lienzo, entonces solo se verá una parte de la imagen, lo cual es malo.

Intenté modificar el tamaño del lienzo en tiempo de ejecución, pero afecta la visualización de la imagen redimensionada.

Así que terminé declarando un grande elemento canvas, lo cual está bastante bien, excepto que el desbordamiento CSS de mi página web se ajusta en mi elemento más grande, y no en mi imagen redimensionada, lo cual es una molestia.

Entonces supongo que hay dos formas de resolver mi problema:

1. Intente excluir el elemento de lienzo grande del esquema de desbordamiento
2. Intente actualizar el tamaño del elemento del lienzo al cambiar el tamaño (es posible que me haya perdido algo allí)

Answer 1

No he probado yo mismo, pero tal vez se puede crear un elemento canvas de la Dom, con document.createElement. Podría ser de tamaño arbitrario sin molestar a la pantalla.

Ahora, me falta el contexto (¿por qué cambia el tamaño de las imágenes de esta manera en lugar de utilizar atributos de anchura y altura, entre otras cuestiones) así que tal vez me estoy perdiendo el punto.