Duda en Canvas

Middrel · #1 (**permalink**) 09/12/2011, 13:52

Hola, buenas tardes...

Actualmente estoy haciendo unas pruebas con canvas, sin embargo tengo algunas dudas al querer colocar texto sobre mi lienzo, por ejemplo:

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Proyecto Canvas</title>
   <!--Incluimos librería para movimiento de imagenes en Canvasy cargamos archivos JS-->
   <script src="lib/kinetic-v2.3.2.js"></script>
   <script src="js/banner.js"></script>
   <script type="text/javascript">
        //En esta sección definimos si el navegador soporta canvas
		function cargaContextoCanvas(idCanvas){
		   var elemento = document.getElementById(idCanvas);
		   if(elemento && elemento.getContext){
		      var contexto = elemento.getContext('2d');
		      if(contexto){
		         return contexto;
		      }
		   }
		   return FALSE;
		}
	</script>
</head>

<body onmousedown="return false;">
	<h3>Proyecto Canvas</h3>
	<table width="1244" height="600" border="1">
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td width="170" rowspan="2">&nbsp;</td>
    <td width="1079" rowspan="2" valign="top">
    	<div id='container' class="drawImage" style="padding: 10px">
    	</div>
    	<!--<canvas id="container" class="drawImage" style="border: 1px solid grey" width="1030" height="360"></canvas>-->
    </td>
  </tr>
</table>

</body>
</html>

y tengo en Javascrip lo siguiente:

Código:

//Iniciamos la función para definir el contenedor de la imagen, posiciones y dimensiones
function drawImage(imageObj){
	var stage = new Kinetic.Stage("container", 1030, 360);
   	var canvas = stage.getCanvas();
    var rectX = canvas.width / 2 - 200 / 2;
    var rectY = canvas.height / 2 - 137 / 2;
    var draggingRect = false;
    var draggingRectOffsetX = 0;
    var draggingRectOffsetY = 0;
 
    var canvasImg = Kinetic.drawImage(imageObj, rectX, rectY, 745, 100);
    var canvasImg = new Kinetic.Shape(canvasImg);
 
    canvasImg.addEventListener("mousedown", function(){
    	draggingRect = true;
        var mousePos = stage.getMousePos();
 
        draggingRectOffsetX = mousePos.x - canvasImg.x;
        draggingRectOffsetY = mousePos.y - canvasImg.y;
    });
    
    canvasImg.addEventListener("mouseover", function(){
    	document.body.style.cursor = "pointer";
    });
    
    canvasImg.addEventListener("mouseout", function(){
        document.body.style.cursor = "default";
    });
 
    // Eventos de movimiento de la imagen con el mouse	
    stage.add(canvasImg);
 
    	stage.addEventListener("mouseout", function(){
        	draggingRect = false;
        }, false);
 
 	stage.addEventListener("mousemove", function(){
    	var mousePos = stage.getMousePos();
        if (draggingRect) {
        	canvasImg.x = mousePos.x - draggingRectOffsetX;
            canvasImg.y = mousePos.y - draggingRectOffsetY;
            canvasImg.draw();
        }
    }, false);
    
    stage.addEventListener("mouseup", function(){
       draggingRect = false;
    });
}

// Cargamos la imagen y la desplegamos en la página
window.onload = function(){
	// load image
    var imageObj = new Image();
    imageObj.onload = function(){
    	drawImage(this);
    };
    imageObj.src = 'img/SB_4170596_BI.png';
};	

function drawText(){
	
	var canvas = document.getElementById('canvas');
	
	if(canvas.getContext){
		var ctx = getContext('2d');
		
		ctx.fillStyle ='#00F';
		ctx.font ='Bold 30px Sans-Serif';
		ctx.textBaseline ='Top';
		ctx.fillText('$1,990',40,40);		
	}
	else{
		alert('IE7 no puede ejecutar canvas');
	}	
}

Al ejecutar la página todo funciona correctamente, pero por ejemplo, si ven en la parte de HTML, tengo en un div la instrucción para que pinte el lienzo:

Código HTML:

<div id='container' class="drawImage" style="padding: 10px">

¿Porqué no puede funcionar en la siguiente instrucción?

Código HTML:

<canvas id="container" class="drawImage" style="border: 1px solid grey" width="1030" height="360"></canvas>

eso por una parte, ahora, quiero colocar en el lienzo un texto (que posteriormente cambiará automáticamente, obteniendo la información de una bd, el problema es que no me deja colocarlo. Alguno podría orientarme a como proceder, o si estoy equivocado en algo.

De antemano, muchas gracias por sus comentarios. Por cierto, lo estoy ejecutando en Chrome, Safari, Opera y Firefox.