Самый простой способ вставить облако (изображение) в падающий снег с помощью canvas + JavaScript

Question

Я выбрал решение Canvas для падающего снега из webbreakstuff .

Теперь я хотел бы, чтобы это выглядело так, как будто этот снег выпал из облака.

У меня есть изображение облака, cloud.png.

Я хотел бы создать его с помощью JavaScript, например, так:

var cloud = new Image();
cloud.src = "cloud.png";

Теперь я хочу, чтобы он рисовался перед одним из двух холстов (bgcanvas или fgcanvas), но я не могу понять, как это сделать правильно в соответствии с context.drawImage.

Может ли кто-нибудь помочь мне выяснить, где разместить это изображение и как это сделать?

Спасибо.

Answer 1

Итак, у вас есть два элемента canvas, fgcanvas и bgcanvas, впереди fgcanvas.

var cloud = new Image();
cloud.src = "cloud.png";
//I am assuming that both canvases are in the same position.
var ctx = fgcanvas.getContext('2d');
ctx.drawImage(cloud, sourceOfSnowX, sourceOfSnowY;

Следует нарисовать cloud.png в начале снега.