Crear mediante programación HTML5 Canvas

tengo los siguientes fragmentos de código HTMLCrear mediante programación HTML5 Canvas

<body onload="main()" > 
    ... 
    <canvas id="myId" class="myClass"></canvas> 
    ... 
</body>

Funciona como se esperaba. Puedo mostrar la salida correctamente.

entonces elimino

<canvas id="myId" class="myClass"></canvas>

Porque quiero crear mediante programación con el siguiente código JavaScript fragmento

var canvas = document.createElement("canvas"); 
canvas.className = "myClass"; 
canvas.id = "myId";

Por desgracia, no funcionó. No puedo mostrar nada con esto.

Me pregunto si extraño algo. Cualquier ayuda es apreciada. Gracias de antemano por su ayuda.

2011-01-22 pion

Tiene que adjuntar el lienzo al documento. Antes de hacerlo, es solo un elemento separado que el navegador no procesa.

var canvas = /* ... */; 
/* ... */ 
document.getElementsByTagName('body')[0].appendChild(canvas);

2011-01-22 03:23:28

@Ben, @Matt - Ambas soluciones funcionan. Votado para ambos ya. ¡Muchas gracias! – pion

@pion: de nada. Me di cuenta de que nuestras respuestas se publicaron en 1 segundo el uno del otro ... –

Debe insertar el nuevo elemento <canvas> en el DOM. Para ponerlo en el extremo del cuerpo, utilice:

document.body.appendChild(canvas);

con el código que crea. (Si desea colocarlo dentro de un elemento diferente, utilícelo en lugar de document.body).

2011-01-22 03:23:28

Respuesta