HTML - Insertar imagen en canvas

   
Vista:

Insertar imagen en canvas

Publicado por silmf91 (1 intervención) el 02/06/2014 18:48:41
Hola a todos!!!

Me he puesto a hacer una app en HTML5 y me ha surgido un problema...

En mi app tengo un header y luego he colocado un canvas donde quiero cargar una imagen. Mi intención es que esa imagen se reajuste al tamaño del canvas, y éste al tamaño del dispositivo donde se esté ejecutando la app para que quede proporcional. Para ello he intentado varias cosas:

- Lo primero, en el .css, al declarar el canvas he puesto esto:

1
2
3
4
5
6
7
8
9
10
canvas{
    position: absolute;
    top: 44px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    cursor: crosshair;
    width: 100%;
    height: 100%;
}

- He declarado el canvas así: <canvas id="colours" width="device-width"></canvas>. No le he puesto "height" porque supuestamente así ya coge automáticamente el alto del teléfono, pero para comprobar qué medidas tiene el canvas usé un "alert" y me sale que tiene una altura de 150. Eso es imposible.... El único remedio que me ha quedado de momento es machacar yo la altura a "500", por ejemplo, pero en algunos dispositivos puede que de problemas porque no tengan tanta altura...

- Y, por último, al cargar la imagen en el canvas he puesto esto:

1
2
3
4
5
6
7
var img = new Image();
 
img.onload = function(){
   ctx.drawImage(img, 0, 0);
}
 
img.src = "./media/colores.png";

Si lo pongo así, se carga según el tamaño de la imagen sin ajustarse al canvas. Si en vez de poner ese drawImage pongo este otro se ajusta al canvas: ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

Así que mi duda es... como coger bien las medidas del dispositivo para asignarselas al canvas? Y estoy añadiendo bien la imagen al canvas para que se ajuste a su tamaño?

Además tengo otro problema. Si giro la pantalla del dispositivo de vertical a horizontal, la imagen se ajusta a ese tamaño, pero si pinto encima de la imagen, las coordenadas del cursor salen distorsionadas. Hay alguna forma de controlar eso???

Mil gracias!!! :) :)
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder