Сделать стирачку (scratch) как на SVG?

Question

[Дядя Ваня]

В общем сделал я на канвасе затирачку (лотерейного билета что-то типа). В общем есть нижний слой (картинка), сверху вторая картинка, когда кликаю по верхнему слою - он удаляется частично (в той зоне где клацнул в зависимости от радиуса).
Дело в том что мне сказали следующее:
SVG будет качественее, быстрее и код короче (ну и много чего другого).
Перелопалит весь гугл - пусто. Подскажет может кто-то где искать и читать по моейм теме.

Comments

[Алексей Ярков]

На канвасе вот есть

[dollar]

По-моему, это экономия на спичках. Решения на Javascript достаточно, работает ведь. А выигрыш в 0.01 сек это ерунда.
Если вам сказал не начальник, то я бы на вашем месте послал того чувака. Пусть сам переписывает на SVG, если такой умный. Там же всё равно без скриптов не обойтись (событие клика).

[Adamos]

"Весь гугл" ограничился первой страницей выдачи?
https://codepen.io/andreruffert/pen/pvqly
А как это сделать вектором - пусть вам расскажет тот, кто его насоветовал.

[ProjectSoft]

))) Ну так грузите SVG в image и переводите в canvas.

А вот если на чистом svg

быстрее и код короче

То вот пусть он и покажет этот код. В чём проблема то?
Есть советчик - есть у кого и спросить.

Answer 1

[Ivan Bogachev]

Перелопалит весь гугл - пусто.

Посмотрите примеры из этой статьи. К задаче так и напрашиваются SVG-маски.

Answer 2

[profesor08]

SVG будет качественее, быстрее и код короче

Плюнь им в лицо. Код короче не будет. Одно дело на канвасе закрашивать область, другое на svg постоянно генерировать маску, а это манипуляция с dom, а это, в свою очень, медленно.