问画布中带渐变的线条绘制

EN

window.addEventListener('load', ()=>{
    
resize(); // Resizes the canvas once the window loads
document.addEventListener('mousedown', startPainting);
document.addEventListener('mouseup', stopPainting);
document.addEventListener('mousemove', sketch);
window.addEventListener('resize', resize);
});

const canvas = document.querySelector('#canvas');

const ctx = canvas.getContext('2d');

function resize(){
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
}

let coord = {x:0 , y:0};

let paint = false;

function getPosition(event){
coord.x = event.clientX - canvas.offsetLeft;
coord.y = event.clientY - canvas.offsetTop;
}
function startPainting(event){
paint = true;
getPosition(event);
}

function stopPainting(){
paint = false;
}

function sketch(event){
if (!paint) return;
ctx.beginPath();

ctx.lineWidth = 5;

ctx.lineCap = 'round';

var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0.00, 'grey');
gradient.addColorStop(1 / 2, 'white');
gradient.addColorStop(1.00, 'grey');

ctx.strokeStyle = gradient;

ctx.moveTo(coord.x, coord.y);

getPosition(event);

ctx.lineTo(coord.x , coord.y);

ctx.stroke();
}