Animaciones de background

[ryugen]

El método para dibujar imágenes es

Código Javascript:

context.drawImage(img, x, y);
 

Donde,
contex: es el contexto de dibujo del canvas

img: es un objeto imagen, que puedes cargarlo directamente:

Código Javascript:

var img = new Image();
  img.onload = function(){
    ctx.drawImage(img,0,0);
  };
  img.src = '/files/4531/backdrop.png';
 

o bien, tomarlo del DOM

Código Javascript:

var img = document.getElementById("imagen");
 

x e y: son las cordenadas de donde colocar la esquina superior izquierda de la imagen

El método tiene otras opciones, para redimensionar la imagen, eso te lo dejo para que lo investigues en https://developer.mozilla.org/en-US/...l/Using_images

En cuanto a lo segundo, cada vez que cambias el tamaño del canvas (resize de width o height) este se blanquea y tienes que redibujarlo.

Hay dos caminos para esto. Por un lado que escribas una función que lo redibuje (o continue la animación). O bien que el canvas tenga tamaño relativo (por ejemplo porcentual) y lo que cambie de tamaño sea el padre (con este metodo evitas el blanqueo).

Ejemplo:

Código HTML:

<div id="canvas-parent">
    <canvas id="canvas"></canvas>
</div>
 

Código CSS:

#canvas {
    width:100%;
    height:100%;
}