Line drawing in canvas with gradient

Question

I'm looking for a solution to freehand draw a line with a gradient in canvas like this:

I already found this, but the gradient seems to be 'locked' on the background and is not following the line.

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();
}

Can somebody help me please?

(1) don't link images, embed them in the question itself, (2) show what you have tried so far, we are here to help, not to write code for you — Alberto Sinigaglia, Jul 08 '21 at 10:09
Did you see this: https://stackoverflow.com/questions/2368784/draw-on-html5-canvas-using-a-mouse — Chris Berlin, Jul 08 '21 at 10:13
@AlbertoSinigaglia - thanks! (1) I can not embed images yet. I need a rep of 10 before I can do that. (2) updated my question — Tech of StuStu, Jul 08 '21 at 10:26
@ChrisBerlin - thank you also, but it isn't really what I am looking for.. — Tech of StuStu, Jul 08 '21 at 10:28

score 0 · Answer 1 · answered Jul 09 '21 at 15:40

I found a way to do it:

var context = canvas.getContext("2d");
context.strokeStyle = '#000000';
context.fillStyle = '#000000';
context.beginPath();
context.moveTo(10, 10);
context.lineTo(50, 10);
context.lineWidth = 2;
context.stroke();

context.beginPath();
context.lineWidth = 15;
context.moveTo(10, 30);
context.lineTo(50, 30);
context.stroke();

context.beginPath();
context.moveTo(10, 50);
context.lineTo(50, 50);
context.lineWidth = 2;
context.stroke();

Where I reconstructed the gradient with multiple lines and a blur on those lines.

Line drawing in canvas with gradient

1 Answers1