HTML5 canvas 用圆圈填充图像

Question

I was reading this post HTML5 canvas fill circle with image and was curious about doing something a little different.

Step by step I'd like to: 1. Take this image I have of a shield.
2. Trace the outline of the shield to get the shape. 3. Use a second, larger, image to fill the outline of the shield. I don't want it to fit. I just want it to observe the boundaries set by the outline of the shield and not draw outside them.

Here's what I have so far: JSFiddle - outline shape .

var img = new Image();
img.crossOrigin = "anonymous";
img.onload = function () {

    // draw the image
    // (this time to grab the image's pixel data
    ctx.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.height / 2);

    // grab the image's pixel data
    imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    data = imgData.data;

    // call the marching ants algorithm
    // to get the outline path of the image
    // (outline=outside path of transparent pixels
    points = geom.contour(defineNonTransparent);

    ctx.strokeStyle = "red";
    ctx.lineWidth = 2;

    redraw();

}
img.src = "https://cdn1.iconfinder.com/data/icons/shield-4/744/1-512.png";

// redraw the canvas
// user determines if original-image or outline path or both are visible
function redraw() {

    // clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // draw the image

    ctx.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.height / 2);

    // draw the path (consisting of connected points)    
    // draw outline path
    ctx.beginPath();
    ctx.moveTo(points[0][0], points[0][1]);
    for (var i = 1; i < points.length; i++) {
        var point = points[i];
        ctx.lineTo(point[0], point[1]);
    }
    ctx.closePath();
    ctx.stroke();
    ctx.fillStyle="yellow";  // Just filling with yellow temporarily but would like to use an image
    ctx.fill();
}

I'm not sure how to draw inside the outline without overwriting it.

Answer 1

I figured it out using context save, clip, and restore. new jsfiddle

ctx.save();        
ctx.clip();
loadnewimage();
ctx.restore();