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

@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

Новые блоги и статьи Все статьи Все блоги /
Вот уже год прошел, как у меня домен в reg.ru ... Etyuhibosecyu 16.04.2026 И ничего они мне не сделали. Если отвязать карту, никакие услуги они не навяжут. Я бы с радостью продлил еще на два года, чтобы не мучиться с временным доменом и меня уже знали по red-star-soft. com,. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .
Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача №1: при указании работ (справочник РаботыПоРемонтуСпецтехники),. . .

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

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

Решение