Есть canvas
с анимацией отскока от стены мячика.
Как сделать так, чтобы вместо мячика гулял по экрану дед мороз (img картинка), а при соударении об стенку сменялся на елку на голубом фоне и зациклено при новом столкновении со стенкой снова была смена на деда мороза на белом фоне?
Передаю объект изображения
ctx.drawImage(santa, 120, 340);
А как заставить его двигаться?
И доп вопрос: что нужно сделать, чтобы при клике на картинку с (дедом морозом/елкой) останавливалась анимация и появлялась надпись "Счастливого нового рода и Рождества"
var can = document.querySelector("canvas");
var ctx = can.getContext("2d");
var canvasWidth = can.width;
var canvasHeight = can.height;
var radius = 30;
var pX = 60;
var pY = 50;
var vX = 3;
var vY = 3;
var santa = document.querySelector(".santa");
var tree = document.querySelector(".tree");
function draw() {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.beginPath();
ctx.drawImage(santa, 120, 340);
ctx.drawImage(tree, 120, 340);
ctx.fillStyle = "red";
ctx.arc(pX, pY, radius, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
}
function animate() {
if (pY >= canvasHeight - radius || pY <= radius) {
vY = -vY;
}
if (pX > canvasWidth - radius || pX < radius) {
vX *= -1;
}
pX += vX;
pY += vY;
draw();
requestAnimationFrame(animate);
}
animate();
<canvas style="border-style: solid;" width="240px" height="400px"></canvas>
<img class="santa" src="https://i.pinimg.com/originals/0e/f6/c1/0ef6c11df3a2fb3ce04de96cf620ac65.jpg" width="80">
<img class="tree" src="https://img1.labirint.ru/rcimg/e20fb45c1ff31a0789cab36beb9cda1f/960x540/books73/726265/ph_01.jpg?1574439967" width="80">