Тупик под дождем
 

Коллеги, вот такой вопрос, мне кажется не сложный, но я не могу решить уже пару дней.

Скрипт работает, это видно.
Вопрос в разметке: При загрузке страницы картинка-исходник лезет на картинку-результат.
Я пытаюсь ее удалить/скрыть/обесцветить/прозрачный background -- ничего не помогает. Если убить исходник, умирает и результат.

Есть только одно условие -- я не могу вставить адрес картинки прямо в результат. Адрес картинки появляется динамически, в неизвестном месте. Но известен ID картинки. Вот по нему я и пытаюсь получить адрес картинки.

Картинка-результат имеет data-sampler="dispImage" src="" пустой src="" , в него и надо вставить адрес из ID="Image-Rain".
Все работает, все получается и вставляется куда надо. Дождь на месте.


Помогает resize, но так не красиво.
Тоже не ясно, почему resize ? Очевидно, что resize помогает не скрипту, а разметке.

Но вся проблема -- как избавиться от картинки-исходника ?
CODEPEN: Tupic

я делал там z-index: 100; для картинки внутри

#canvas-wrap { 
    position: relative;
  }

Но z-index: 100; тоже с canvas не работает.

Моя только 1 строка в HTML , остальное -- автор дождя. Почему у него такие такие два <div> неизвестно.

Наверное, это сложнее, потому что картинка-исходник скрывается в стилях в скрипте повторно, это не сложно.
Но вот, этот class="plane" в разметке, почему-то лезет наверх. Хотя очевидно, что дождь идёт в канве.
Ну как избавиться от этого плана, я не могу понять.

Всё я сам решил. Похоже, скрипт имеет внутри собственную установку стиля. Типа display:block;. Хотя он загружается в начале страницы, непонятно. А у меня все стили специально вынесены в конец страницы, это не помогает. почему-то в стиле display:none; не работает. А в инлайн-стилях работает. Которые нельзя перебить. Если скрыть план в инлайн-стилях, всё отлично, он скрывается.