I am trying to achieve the effect used here: Canva Registration Page
Fortunately, they took several steps to achieve this effect: Five visual effects
Here is what I have achieved so far:
var canvas, ctx,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0;
function init() {
canvas = document.getElementById('log');
ctx = canvas.getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight
canvas.onmousemove = function(e) {
currX = e.pageX;
currY = e.pageY;
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.lineCap = "round";
var d = distance(prevX, prevY, currX, currY);
var w = 80 / d;
ctx.lineWidth = w;
ctx.stroke();
prevX = currX;
prevY = currY;
}
}
function distance(x1, y1, x2, y2) {
var a = x1 - x2
var b = y1 - y2
var c = Math.sqrt(a * a + b * b);
return c;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
<body onload="init()">
<canvas id="log"></canvas>
However, I cannot:
- Make resizing smooth.
- Make the trail fade away
I looked at some other issues related to the disappearance of the canvas paths, but none of them work correctly for this. Either the path does not disappear completely, or adding a shadow to the path creates a shadow inside the entire page.
Any pointers on how to do this (at least part of the attenuation) will be helpful. I do not need the full end result that canva has, only two things that I cannot understand.