I have code that loads a bunch of images into hidden img elements and then a Javascript loop which places each image onto the canvas. However, I want to clip each image so that it is a circle when placed on the canvas.
My loop looks like this:
$$('#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();
});
Problem is, only the first image is drawn (or is visible).
If I remove the clipping logic:
$$('#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);
});
Then all my images are drawn.
Is there a way to get each image individually clipped?
I tried resetting the clipping area to be the entire canvas between images but that didn't work.
You should try to save current context state and then restore it:
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
});
I think when you call drawImage method,you also need to set image parameter as an Image class by adding a source line which is already in your avatar.src parameter.
You should check the reference document for Canvas State