Анимация распространяется не на весь экран, а только на его часть, не могу понять где ошибка

@Suthedas · Регистрация: 25.05.2018

Студворк — интернет-сервис помощи студентам

У меня возникла такая проблема что анимация не распространяется на весь экран а только на ее часть не понимаю в чем проблем.
Как сделать что бы эта анимация была на весь экран помогите

ссылка на код и визуализацию его:
https://codepen.io/Godje/pen/ZOpWEq

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var canvasBody = document.getElementById("canvas"), 
canvas = canvasBody.getContext("2d"),
w = canvasBody.wight = window.innerWidth,
h = canvasBody.height = window.innerHeight,
opts = { 
size: 50,
sizeRandom: 10,
 spawnOpacity: 1,
 color: "rgba(39, 173, 96, alpha)",
 };
 
function anim(){
 window.requestAnimationFrame(anim);
 
 step();
 }
 anim();
 
 function step(){
  var fillColor = opts.color.replace("alpha", opts.spawnOpacity)
  canvas.fillStyle = fillColor;
  var random = Math.random() * opts.sizeRandom;
  canvas.fillRect(Math.random() * w, Math.random() * h, opts.size + random, opts.size + random)
 canvas.fillStyle = "rgba(255,255,255,0.1)";
 canvas.fillRect(0,0,w,h);
 }

Qwerty_Wasd · 25.05.2018, 23:09

Suthedas, проверил в IE11,EDGE,Chrome,Firefox,Opera. Пашет на ура. В чем проверяли - в сафари? Расширения браузеров отключены?

@atanov · 26.05.2018, 06:32

Suthedas, не уверен, но где-то видел, что вот эти штуки разное означают, но какие что не помню: canvas.style.width и canvas.width.

@Suthedas · 26.05.2018, 09:55 **[ТС]**

Qwerty Wasd да нет все проверяю в гугл хроме. Я тут просто заметил одну вещь когда просматриваю код страницы с браузера то там в canvas задана сама высота хоть в коде я не вписывал.

Qwerty_Wasd · 26.05.2018, 14:20

atanov,

Сообщение от atanov

canvas.style.width и canvas.width

element.width - открыт для чтения. element.style.width - открыт для записи.

Сообщение от Suthedas

то там в canvas задана сама высота хоть в коде я не вписывал

да ну? Код не вы писали?

JavaScript
1
2
w = canvasBody.width = window.innerWidth,
  h = canvasBody.height = window.innerHeight

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	25.05.2018, 23:09
	Сообщение было отмечено Suthedas как решение Решение Suthedas, проверил в IE11,EDGE,Chrome,Firefox,Opera. Пашет на ура. В чем проверяли - в сафари? Расширения браузеров отключены? 1

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	26.05.2018, 06:32
	Suthedas, не уверен, но где-то видел, что вот эти штуки разное означают, но какие что не помню: canvas.style.width и canvas.width. 0

@Suthedas 0 / 0 / 0 Регистрация: 25.05.2018 Сообщений: 2
	26.05.2018, 09:55 [ТС]
	Qwerty Wasd да нет все проверяю в гугл хроме. Я тут просто заметил одну вещь когда просматриваю код страницы с браузера то там в canvas задана сама высота хоть в коде я не вписывал. 0

Анимация распространяется не на весь экран, а только на его часть, не могу понять где ошибка

Решение