Каким образом реализовать слайд-шоу на Canvas?

1

var imageObj = new Image();

1
2
3
4

imageObj.onload = function() {
   ctx.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'image.png';

1
2
3
4
5

var images = [
   {'src': 'image1.png', 'duration': 4000},
   {'src': 'image2.png', 'duration': 5000},
   {'src': 'image3.png', 'duration': 3000}
];

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

function drawImage(i) {
   if (i >= images.length) {
      i = 0;
   }
   var imageObj = new Image();
   imageObj.onload = function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(imageObj, 0, 0);
      setTimeout(function() {
         drawImage(i + 1);
      }, images[i].duration);
   };
   imageObj.src = images[i].src;
}

1

drawImage(0);