Я хотел бы создать на холсте каплю, анимированную с помощью события mousemove.
У меня два вопроса. Сначала я установил ширину и высоту с помощью:
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
Но как я могу уменьшить размер, потому что я пытался изменить ширину / высоту в JS, но на самом деле это не работает:
canvas.width = 400;
canvas.height = 400;
И второй вопрос, круглая форма обусловлена:
ctx.beginPath();
ctx.moveTo(center.x, center.y);
ctx.moveTo((p0.x + p1.x) / 2, (p0.y + p1.y) / 2);
ctx.quadraticCurveTo(p1.x, p1.y, xc, yc);
Как я могу ее изменить? Я хочу что-то вроде этого, например: https://zupimages.net/up/20/28/lz96.png
Fiddle: https://jsfiddle.net/7a4npwg3/