Jugar con el tamaño de la imagen en un canvas sin deformarlo requiere dos cosas:
- Que el tamaño de la foto sea conocido, para poder respetar las proporciones.
- Que el tamaño interno del del canvas y el tamaño externo sean conocidos, para tratar deformaciones.
El primer punto es sencillo de entender: si tenemos una imagen de 400 px de largo y 300 px de ancho, este tamaño será el que se muestre por defecto, pero podemos usar estilos para cambiar esto:
document.querySelector('button')
.addEventListener('click', function() {
document.querySelector('img').classList.toggle('dieciseis-novenos');
}
);
.dieciseis-novenos {
width: 533px;
height: 300px;
}
<img src="https://www.fillmurray.com/400/300" alt="Imagen de 400x300" title="Imagen de 400x300"/>
<button>Aplicar estilo 16/9</button>
El segundo punto requiere entender cómo funciona el elemento Canvas: tiene un tamaño, definido por los atributos width
y height
, que es el número de pixels "lógicos" que lo componen. Si tengo un canvas de 200*200 pixels, un círculo con 100px de radio ocupará todo.
Pero sin variar este tamaño "interno" del canvas, puedo cambiar la vista por CSS: haciéndolo más grande o pequeño, respetando sus proporciones o no, lo que puede deformar la imagen creada:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 100, 0, 2 * Math.PI); //círculo de 100 de radio
ctx.stroke();
canvas {
border: 1px solid blue;
width: 175px;
height: 100px;
}
<canvas id="canvas" width="200" height="200"></canvas>
Es decir, el canvas (recordemos que canvas se traduce literalmante como lienzo) sigue teniendo un espacio para dibujar de 200x200, independientemente del tamaño en pixels que tenga su visualización.
Por tanto, si queremos dibujar una imagen sin deformarla en un canvas tenemos que tener en cuenta las proporciones de la imagen Y del canvas: Puedes no deformar la imagen en sí, pero que el canvas la deforme o viceversa... o puedes deformar la imagen pero que el canvas la deforme en el sentido opuesto, cancelando la deformación original:
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.src = 'https://www.fillmurray.com/400/300';
image.onload = function(){
ctx.drawImage(image, 0, 0, 200, 150); //mantiene la proporcion, mitad de tamaño
ctx.drawImage(image, 250, 0, 200, 300); // no mantiene la proporción
}
document.querySelector('button')
.addEventListener('click', function() {
document.querySelector('canvas').classList.toggle('dieciseis-novenos');
}
);
canvas {
border: 1px solid blue;
}
.dieciseis-novenos {
width: 600px;
height: 150px;
}
<canvas id="canvas" width="600" height="300"></canvas>
<button>Deformar Canvas</button>