(JS-HTML5) - Criar várias formas dentro do mesmo canvas

[Filipe_O 0]

Mekie pessoal!

Para uma cadeira da faculdade tenho de fazer uma animação em Javascript e HTML5 e eu pensei em criar uma página com vários botões, cada um com um fundo diferente.

Posto isso, tenho este código no script:

    var canvas = document.getElementById('myCanvas');
 var ctx = canvas.getContext('2d');
    var posicaoX = 100;
    var posicaoY = 100;
 var pos_des_X = 50;
    var pos_des_Y = 80;
 for(i = 0; i < 3; i++){
 ctx.arc(posicaoX, posicaoY, 60, 0, Math.PI*2,true); // you can use any shape
     ctx.fill();
 var img = new Image();
 img.addEventListener('load', function() {
 ctx.drawImage(img, pos_des_X, pos_des_Y); }, true);
 pos_des_Y += 100;
 posicaoY += 100;
    switch (i) {
                case 0: img.src = "ChetFaker_mini.jpg"; alert("opcao 1");
                              break;
                case 1: img.src = "D_P_mini.jpg"; alert("opcao 2");
                               break;
                }
 }

Portanto, crio os diferentes círculos com o for e dependendo do ciclo do for, assim é o fundo do botão.

A consola gera-me os círculos mas não me atribui os diferentes fundos.

Já fiz debug e o switch está a funcionar. E o fundo, definido antes do switch, também funciona.

De alguma maneira, ele não me assume a atribuição dentro do switch.

Soube que a solução para atribuir o fundo aos círculos passa pelo atributo "clip" mas não me funciona.

Sabem-me ajudar?

Obrigado

Edited January 26, 2016 by Filipe_O

[HappyHippyHippo 1,162]

o "loading" das imagem é feita de uma forma assincrona.

isto quer dizer que apesar de teres o código para carregar as imagem elas (de certeza) só irão "chegar" ao browser depois desse código todo.

o que terás de fazer é só efetuar o código de desenho depois de confirmares que a imagem já chegou

dá aqui uma vista de olhos

http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/

     function loadImages(sources, callback) {
       var images = {};
       var loadedImages = 0;
       var numImages = 0;
       // get num of sources
       for(var src in sources) {
         numImages++;
       }
       for(var src in sources) {
         images[src] = new Image();
         images[src].onload = function() {
           if(++loadedImages >= numImages) {
             callback(images);
           }
         };
         images[src].src = sources[src];
       }
     }
     var canvas = document.getElementById('myCanvas');
     var context = canvas.getContext('2d');

     var sources = {
       darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
       yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'
     };

     loadImages(sources, function(images) {
       //..................................................................................
       // código que só irá ser executado após as imagens serem carregadas
       //..................................................................................
       context.drawImage(images.darthVader, 100, 30, 200, 137);
       context.drawImage(images.yoda, 350, 55, 93, 104);
     });