mobile screens via css prop

Author: danieledep

assets/style.css

@@ -1,5 +1,7 @@
 
 :root {
+  --heightScreen: 583px;
+  --widthScreen: 800px;
   --backgroundColor: white;
   --buttonSize: 50px;
 }
@@ -17,8 +19,10 @@ canvas {
   margin-left: auto;
   margin-right: auto;
   margin-top: 80px; 
-  width: 100% ;
-  height: 100%;
+  // width: 100%;
+  // height: 100%;
+  width: var(--widthScreen);
+  height: var(--heightScreen);
   // background-image: url(http://github.com/"cassette-depth.svg");
 }
 

src/sketch.js

@@ -48,8 +48,8 @@ function setup() {
 
   // define canvas dimensions for mobile screens
   if (window.innerWidth < widthScreen) {
-    heightScreen = window.innerWidth * (heightScreen / widthScreen);
-    widthScreen = window.innerWidth;
+    root.style.setProperty('--heightScreen', window.innerWidth * (heightScreen / widthScreen) + "px");
+    root.style.setProperty('--widthScreen', window.innerWidth + "px");
   }
 
   canvas = createCanvas(widthScreen, heightScreen);