Изображение в окружности (canvas)

[HuHguZ]

Здравствуйте, такой вопрос, как мне в качестве заливки окружности на canvas сделать какое-нибудь изображение? При этом окружность может перемещаться по экрану и изменять величину радиуса, изображение тоже должно изменяться. Возможно ли такое? Вот пример кода отрисовки окружности:

ctx.beginPath();
ctx.fillStyle = pl[8];
ctx.fill();
ctx.strokeStyle = pl[9];
ctx.lineWidth = Math.round(0.02 * pl[2]);
ctx.stroke();
ctx.arc(pl[0], pl[1], pl[2], 0, Math.PI * 2, false);
ctx.closePath();

[Rise]

Вот пример кода отрисовки окружности

Пример явно не рабочий, ctx.fill() и ctx.stroke() должны идти после ctx.closePath(), почитай основы canvas.

как мне в качестве заливки окружности на canvas сделать какое-нибудь изображение?

Можно просто готовую картинку с круглым изображением и прозрачным фоном через ctx.drawImage() отрисовать:

var circle = {
    x: canvas.width / 2,
    y: canvas.height / 2,
    radius: 10,
    scale: 1.5,
    draw: function(ctx) {
        var radius = this.radius * this.scale;
        ctx.drawImage(image, 0, 0, 20, 20, this.x - radius, this.y - radius, radius * 2, radius * 2);
    }
};
circle.draw(ctx);

[Alexandroppolus]

варианты:

1) делать обрезку (путь в виде окружности), потом на это дело рисовать картинку - отрисуется только внутри обрезки

ctx.beginPath();
ctx.arc(0, 0, 60, 0, Math.PI * 2, true);
ctx.clip();

2) fillStyle в виде паттерна с картинкой. Потом рисовать закрашенную окружность - будет соответствующая заливка.

[рони]

http://know-online.com/post/canvas-zakruglit-kartinku
живой пример из ссылки выше
http://jsfiddle.net/t2userkq/

[Rise]

4 варианта значит: drawImage, clip + drawImage, createPattern, globalCompositeOperation + drawImage. И во всех кроме 3-го можно обойтись без scale() ... и во всех кроме 1-го можно обойтись без круглого изображения...