HTML5 - Insertar una imagen en un <canvas>

lemmy2011 · #1 (**permalink**) 30/08/2016, 09:17

Muy buenas a todos!!

Ojalá alguien me pueda ayudar, de antemano, muy agradecido!

Me estoy peleando ( y duro jeje ) utilizando el elemento <canvas>. Bien, de momento quiero algo, aparentemente, tan sencillo como colocar una imagen en un <canvas>. Y que se muestre la imagen completa.

Mi problema? Imaginemos que el canvas tiene un width:250px. Yo tengo que cargar una imagen, y debe ajustarse a ese width. Lo que me está pasando es que, al cargar la imagen, la carga pero recortándola a 250px. Es decir, si la imagen, por ejemplo, tiene un width de 500, en el canvas sólo me aparece la mitad de la imagen.

¿Cómo podría hacer para qu ela imagen se ajustase al ancho del canvas??

Muchísimas gracias a todos!! :))

lemmy2011 · #2 (**permalink**) 30/08/2016, 09:29

Hola! Ya lo he sacado!! :)

Por si a alguien le puede interesar!

<!DOCTYPE html>

<html lang=“en”>

<head>

<meta charset=“utf-8” />

<title></title>

<style>

.contenedor{
box-sizing:border-box;
float:left;
width:50%;
padding:10px;
}
.lienzo{
border:1px solid #d9d9d9;
}
#micanvas{width:100%;float:left;}

</style>

</head>

<body>

<div class="contenedor" style="border-style:solid;">

<canvas class="lienzo" height="300px" width="300px" id="micanvas"></canvas>

<script>

var canvas = document.getElementById("micanvas");

var ctx = canvas.getContext("2d");

var img = new Image();

img.src = "./imagen.gif";

ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

</script>

</div>

</body>

</html>