用图片创建pattern 作为 strokeStyle 能相对简单的实现

var canvasWidth = 2000;
var canvasHeight = 1143;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var isMouseDown = false;
var imageReady = false;
var lastPoint = {x: 0, y: 0};
canvas.width = canvasWidth;
canvas.height = canvasHeight;


var pattern ;
var image = new Image();
image.src = "image.jpg";
image.onload = function () {
    imageReady = true;
    pattern = context.createPattern(image,"no-repeat");
};

function windowToCanvas(x, y) {
    var bbox = canvas.getBoundingClientRect();
    return {
        x: Math.round(x - bbox.left),
        y: Math.round(y - bbox.top),
    };
}

canvas.onmousedown = function (e) {
    e.preventDefault();
    isMouseDown = true;
    lastPoint = windowToCanvas(e.clientX, e.clientY);
};
canvas.onmouseup = function (e) {
    e.preventDefault();
    isMouseDown = false;

};
canvas.onmouseout = function (e) {
    e.preventDefault();
    isMouseDown = false;

};
canvas.onmousemove = function (e) {
    e.preventDefault();
    if (isMouseDown) {
        var curPoint = windowToCanvas(e.clientX, e.clientY);

        imageLine(curPoint,lastPoint);

        lastPoint = curPoint;
    }

};

function imageLine(curPoint,lastPoint) {
    context.beginPath();
    context.moveTo(curPoint.x,curPoint.y);
    context.lineTo(lastPoint.x,lastPoint.y);
    context.strokeStyle=pattern;
    context.lineWidth=20;
    context.lineCap="round";
    context.stroke();

}

var wid = 800,

hei = 600,

canvas = document.getElementById('canvas'),

ctx = canvas.getContext('2d'),

clippingRegion = {},

radius = 70,

theAnimation; //控制show动画

canvas.width = wid;

canvas.height = hei;

var image = new Image();

image.src = 'img/1.jpg';

image.onload = function() {

initCanvas();

}

function initCanvas() {

clearInterval(theAnimation);

clippingRegion = {

x: (Math.random() * (wid - radius * 2) + 50),

y: (Math.random() * (hei - radius * 2) + 50),

r: 0

};

var ID = setInterval(function(){

clippingRegion.r +=4;

draw(image, clippingRegion);

if(clippingRegion.r>=radius){

clearInterval(ID);

}

},30)

}

function draw(image, clippingRegion) {

ctx.clearRect(0, 0, wid, hei);

ctx.save();

setClippingRegion(clippingRegion);

ctx.drawImage(image, 0, 0, wid, hei);

ctx.restore();

}

function setClippingRegion(clippingRegion) {

ctx.beginPath();

ctx.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, 2 * Math.PI, false);

ctx.clip();

}

function reset() {

initCanvas();

}

function show() {

theAnimation = setInterval(function(){

clippingRegion.r +=20;

draw(image, clippingRegion);

if(clippingRegion.r>=2*Math.max(wid,hei)){

clearInterval(theAnimation);

}

},30)

}