March 12, 2021

JavaScript p5js "hello world" на весь экран и запуск в отдельном html файле.

Вроде бы все просто, создавая канвас указываем реальную ширину и высоту экрана:

createCanvas(window.innerWidth, window.innerHeight);

и в их плеере все будет нормально

однако если сохранить в файл и запустить как обычный html то будут рамки

просто прикрутим стиль: style="margin: 0px;" и вуаля, исходный код:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.0/p5.min.js"></script> <body style="margin: 0px;">

<script> function setup() { createCanvas(window.innerWidth, window.innerHeight); }

function draw() { background(220); } </script>

</body>

теперь все отлично и никаких лишних белых рамок нет

Добавим текста и фон и теперь наш хеловорд на весь экран браузера.