Как сделать шаблон Patternizer более крупным, не теряя качества

Question

Итак, я недавно нашел аккуратный инструмент под названием Patternizer (возможно, вы его слышали), который имеет простой в использовании интерфейс, который создает шаблоны, которые вы можете затем мгновенно получить код для и использовать вместе со своей библиотекой js.

Так, чтобы правильно использовать библиотеку и данный код это требует canvas элемента, так, чтобы сделать вещи легко я взял свой пример элемента и идентификатор: <canvas id="bgCanvas"></canvas> и положить, что сразу после моего header конечного тега.

Код JavaScript для простой схеме я создал это:

bgCanvas.patternizer({ 
stripes : [ 
    { 
     color: '#000000', 
     rotation: 315, 
     opacity: 50, 
     mode: 'normal', 
     width: 3, 
     gap: 98, 
     offset: 123 
    }, 
    { 
     color: '#000000', 
     rotation: 45, 
     opacity: 50, 
     mode: 'normal', 
     width: 3, 
     gap: 98, 
     offset: 123 
    }, 
    { 
     color: '#0d050a', 
     rotation: 25, 
     opacity: 60, 
     mode: 'normal', 
     width: 100, 
     gap: 100, 
     offset: 156 
    }, 
    { 
     color: '#0d050a', 
     rotation: 335, 
     opacity: 60, 
     mode: 'normal', 
     width: 100, 
     gap: 100, 
     offset: 156 
    } 
], 
bg : '#231d1d' 
}); 

Сейчас. Он работает, однако я заметил, что элемент холста чрезвычайно мал: Как вы можете видеть, холст (в левом верхнем углу) слишком мал. Итак, мой первый инстинкт должен был изменить его CSS на: canvas {width: 100%; height: 100%;, к которому я также добавил: z-index: -1;position:absolute;} однако Вот что я получил следующий: Как вы можете видеть холст гораздо больше, однако, картина просто взорван и теряет это предыдущий масштаб и качество. Есть ли простое исправление этого в CSS, которое мне не хватает? Пожалуйста помоги!

Спасибо,

- micoxion

Answer 1

Я думаю, вам нужно указать высоту холста и ширину в HTML элемента, как указано на patternizer документы.

https://info.patternizer.com/docs/

Если то, что вам нужно, это хороший простой шаблон я бы рекомендовал использовать CSS единственное решение, как найденному на http://lea.verou.me/css3patterns/

Использование JS и холст для этого слишком много проблема.

EDIT: Если вы используете эти шаблоны, я рекомендую передать код через https://autoprefixer.github.io, поэтому он имеет правильные префиксы и работает во всех браузерах.

Вы можете узнать больше о шаблонах CSS и методов в https://css-tricks.com/stripes-css/