Canvas javascript не отображает красный квадрат на телефоне

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTMLNote
    </title>
    <link rel="manifest" href="../Important Files/manifest.json">
    <link rel="shortcut icon" href="./icon.1.png" type="image/png"/>
    <link rel="stylesheet" href="./index.css"/>
    <link rel="apple-touch-icon" href="./icon.1.png"/>
    <meta charset="utf-8" name="viewport" content="width=device-width">
    <meta name="theme-color" content="#880089"/>
    <meta name="Description" content="Table for info">        
</head>

    <div class="container" style="overflow: auto;" name="scroll">
        <canvas id="canvas" ></canvas>
        <script type="module" src="./index.js"></script>
        <div class="container shadow"></div>
        <input type="button" id="menu" onclick="Menu()" value="&#9776;"/>
        <div class="active_menu"></div>
        <script src="./menu.js"></script>
    </div>
</html>

Не отображается на телефоне, а css кнопку и фон видно. На компъютере всё отлично работает.

import Interfaces from "./interface.js";
(function() {
var canvas = document.getElementById("canvas"),
 context = canvas.getContext("2d");

    window.addEventListener("resize" ,resizeCanvas ,false);
    function resizeCanvas() {
        
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight; 
        
        drawStuff();
    }
    resizeCanvas();
    function drawStuff() {
        context.fillStyle = "red";
        context.fillRect(100 ,100 ,2000 ,2000);})();

CSS

html ,body {
    padding:0;
    margin:0;
    height:100%;
    width:100%;}
canvas {
    top:0;
    left:0;
    bottom:0;
    right:0;
    position: fixed;}
.container {
    width: 100%;
    height: 100%;}
.shadow {
    background-color: transparent;
    box-shadow: inset 0 0 100px 10px gray;
    position: fixed;}

#menu {
    width: 50pt;
    height: 50pt;
    border: none;
    right: 0;
    position:fixed;
    border-radius: 10%;}
#menu:hover {
    background-color: red;}
#menu:active {
    background-color: blue;}
.active_menu {
    width: 15%;
    height: 0%;
    background-color: black;
    right: 0;
    position: fixed;}

Update . Проблема может быть или в (function (){})() (1.3Gb ОП),или в размерах экрана .Я начал писать с ноля скрипты и теперь телефон отображает холст (пока стандартных размеров) .Теперь это выглядит так .

var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");

function draw(){
    context.fillStyle = "red";
    context.fillRect(0 ,0 ,100 ,100);
}
window.onload = draw;

БЛОГ НА HUSL

Canvas javascript не отображает красный квадрат на телефоне

Ответы (0 шт):