Canvas, y su espaciado.

royalz · #1 (**permalink**) 03/03/2013, 17:13

A ver como explico esto. Al dibujar un canvas, cuando modificas el "height", lo modifica partiendo desde la base y no desde arriba, o almenos es lo que me hace en este codigo, que tambien estoy probando en el tryit de w3scholl y me pasa igual.

Código:

<!DOCTYPE html>
<html>
<body>
	<div id="header-inner" style="width: 900px; height: 130px; background-color: #000000;">
		</div>
		<div id="nav" style="width: 900px; height: 40px; background-color: #dd1b24;">
			<div class="internav"></div>
			<div class="social">
				<div id="face"><a href=""></a></div>
				<div id="twitt"><a href=""></a></div>
				<div id="you"><a href=""></a></div>
			</div>
		</div>
<canvas id="myCanvas" width="900" height="1" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>

</body>
</html>

Tecna · #2 (**permalink**) 04/03/2013, 11:07

Buenas,

no se entiende a que te refieres pero por el código que muestras parece que estás modificando el tamaño con css y así sólo cambia su apariencia y tendrías que hacer las referencias a las medidas originales. Además si no mantienes la proporción lo que pintes en el lienzo te quedará deformado.

Otra cosa a tener en cuenta a la hora de pintar en el lienzo es que se empieza a pintar en el centro del pixel y hacia afuera, es decir que si pintas algo en el punto 0, 0 parte quedará fuera y no se verá.

royalz · #3 (**permalink**) 05/03/2013, 03:14

Al final lo he solucionado con un div, xD, rapido... la verdad es que si pones 2 divs arriba se ve mejor lo que quiero decir, en w3school, el background y los bordes los modifican con css tambien.

Si tienes un div y le cambias el height, digamos que al refrescar veras como se hace mas alto pero con direccion de arriba hacia abajo, con el canvas es al reves.