¿Puede tener múltiples regiones de recorte en un lienzo HTML?

Question

Tengo un código que carga un montón de imágenes en elementos img ocultos y luego un bucle de Javascript que coloca cada imagen en el lienzo. Sin embargo, quiero recortar cada imagen para que sea un círculo cuando se coloca en el lienzo.

Mi bucle se ve así:

$$('#avatars img').each(function(avatar) { 
     var canvas = $('canvas'); 
     var context = canvas.getContext('2d'); 

     var x = Math.floor(Math.random() * canvas.width); 
     var y = Math.floor(Math.random() * canvas.height); 

     context.beginPath(); 
     context.arc(x+24, y+24, 20, 0, Math.PI * 2, 1); 
     context.clip(); 

     context.strokeStyle = "black"; 

     context.drawImage(document.getElementById(avatar.id), x, y); 

     context.stroke(); 
    }); 

El problema es que solamente se dibuja la primera imagen (o visible).

Si quito la lógica de recorte:

$$('#avatars img').each(function(avatar) { 
     var canvas = $('canvas'); 
     var context = canvas.getContext('2d'); 

     var x = Math.floor(Math.random() * canvas.width); 
     var y = Math.floor(Math.random() * canvas.height); 

     context.drawImage(document.getElementById(avatar.id), x, y); 
    }); 

Entonces todas mis imágenes son atraídos.

¿Hay alguna manera de obtener cada imagen recortada individualmente?

Intenté restablecer el área de recorte para que fuera todo el lienzo entre las imágenes pero eso no funcionó.

Answer 1

Usted debe tratar de guardar el estado actual contexto y luego restaurarla:

 canvas = document.getElementById("area"); 
     context = canvas.getContext('2d'); 

     $("#avatars img").each(function(avatar) { 

      var x = Math.floor(Math.random() * canvas.width); 
      var y = Math.floor(Math.random() * canvas.height); 

      context.save();//push current state into canvas 
      context.beginPath(); 
      context.arc(x + 24, y + 24, 20, 0, Math.PI * 2, 1); 
      context.clip(); 

      context.strokeStyle = "black"; 

      //draw image this way 
      var img = new Image(); 
      img.src = avatar.src; 
      img.onload = function() { 
       context.drawImage(img, x, y); 
      }; 

      context.stroke(); 
      context.restore();//restore context to the state 

     }); 

pienso cuando se llama método drawImage, también tiene que establecer parámetros de imagen como una clase imagen mediante la adición de una línea de base que es ya en su avatar.src parámetro.

debe comprobar los documentos de referencia para Canvas State