Skip to main content

Why does this canvas content get cut off when oriented sideways?

I have an audio visualizer I've made and (I've increased the height cap of it so the problem is more clear) for some reason it just cuts off at a certain point and I haven't been able to figure it out. While the visualizer has this issue when oriented to the left like this, the problem does not exist when anchored normally to the bottom. Any help to figure this out would be greatly appreciated!

How it looks now \/

bad lookikng

How I want the height to look (but sideways so its extends to the end of the canvas horizontally) \/

normal looking

This is the code for it:

 <head>
      <meta charset="UTF-8"> 
      <script src="properties.js"></script>
      <script src="clockRefresh.js"></script>
     
      <link href='https://fonts.googleapis.com/css?family=DM Mono' rel='stylesheet'>
      <link href='https://fonts.googleapis.com/css?family=Share Tech Mono' rel='stylesheet'>
  
      <style>
           #time-panel {   
                position: absolute;    
                background-color: rgba(0, 0, 0, 0.3);  
                border-radius: 20px; 
                
           }
           #hour, #min, #sec {
                font-family: 'dm mono';
                font-weight: 1000;                 
           }
           #clock {
                display: table;
                margin: 0 auto;
           }
           #audioCanvas {
                border-radius: 20px; 
                background-color: rgba(0, 0, 0, 0.3); 
                position: absolute;
           }
      </style>
      
 </head>
 <body onload="clock()"  > 
      <div id="time-panel">
           <canvas id="canvas"></canvas>
           <span id="clock">
                <span id="hour"></span>
                <span id="min"></span>
                <span id="sec"></span>
           </span>
      </div>

      <!-- Canvas where visualizer is drawn -->
      <canvas id="audioCanvas"></canvas>
     
    
      <!-- Script that creates said visualizer -->
      <script>
           // Get the audio canvas once the page has loaded
           let audioCanvas = document.getElementById('audioCanvas');

           // Get the 2D context of the canvas to draw on it in wallpaperAudioListener
           let audioCanvasCtx = audioCanvas.getContext('2d');

           // Setting internal canvas resolution to user screen resolution
           // (CSS canvas size differs from internal canvas size)
           audioCanvas.height = window.innerHeight;
           audioCanvas.width = window.innerWidth;

           function wallpaperAudioListener(audioArray) {
                audioCanvasCtx.clearRect(0, 0, audioCanvas.width, audioCanvas.height);

                if (sessionStorage.getItem("audio-orientation") == "left" ||
                     sessionStorage.getItem("audio-orientation") == "right") {

                

                     // Render bars along the full height of the canvas
                     var barWidth = Math.round(1.0 / 128.0 * audioCanvas.height);
                     var halfCount = audioArray.length / 2;
                }
                else {
                     // Render bars along the full width of the canvas
                     var barWidth = Math.round(1.0 / 128.0 * audioCanvas.width);
                     var halfCount = audioArray.length / 2;
                }
                // Begin with the left channel in red
                audioCanvasCtx.fillStyle = 'rgb(255,0,0)';
                // Iterate over the first 64 array elements (0 - 63) for the left channel audio data
                for (var i = 0; i < halfCount; i += parseInt(sessionStorage.getItem("bar-amount"))) {
                     // Create an audio bar with its hight depending on the audio volume level of the current frequency
                     var height = audioCanvas.height * Math.min(audioArray[i], 1) * sessionStorage.getItem("bar-height");
                     audioCanvasCtx.fillRect(barWidth * i, audioCanvas.height - height * sessionStorage.getItem("bar-distortion"), barWidth, height);
                }

                // Now draw the right channel in blue
                audioCanvasCtx.fillStyle = 'rgb(0,0,255)';
                // Iterate over the last 64 array elements (64 - 127) for the right channel audio data
                for (var i = halfCount; i < audioArray.length; i += parseInt(sessionStorage.getItem("bar-amount"))) {
                     // Create an audio bar with its hight depending on the audio volume level
                     // Using audioArray[191 - i] here to inverse the right channel for aesthetics
                     var height = audioCanvas.height * Math.min(audioArray[191 - i], 1) * sessionStorage.getItem("bar-height");;
                     audioCanvasCtx.fillRect(barWidth * i, audioCanvas.height - height * sessionStorage.getItem("bar-distortion"), barWidth, height);
                }

                if (sessionStorage.getItem("audio-orientation") == "left") {
                     //temp canvas to store rotation data
                     var tempCanvas = document.createElement("canvas"),
                     tempCtx = tempCanvas.getContext("2d");

                     tempCanvas.width = audioCanvas.width;
                     tempCanvas.height = audioCanvas.height;
                     tempCtx.drawImage(audioCanvas, 0, 0, audioCanvas.width, audioCanvas.height);

                     // Now clear the portion to rotate.
                     audioCanvasCtx.clearRect(0, 0, audioCanvas.width, audioCanvas.height);

                     audioCanvasCtx.save();
                     // Translate (190/2 is half of the box we drew)
                     audioCanvasCtx.translate(audioCanvas.width / 2, 0);

                     // Rotate it
                     audioCanvasCtx.rotate(90 * Math.PI/180);

                     // Finally draw the image data from the temp canvas.
                     audioCanvasCtx.translate(audioCanvas.height / 45, -audioCanvas.width / 16);
                     audioCanvasCtx.width = audioCanvasCtx.width * 10;
                     audioCanvasCtx.drawImage(tempCanvas, 0, 0, audioCanvas.width, audioCanvas.height * 2, 0, 0, audioCanvas.width, audioCanvas.height * 2);
                     audioCanvasCtx.restore();
                }
           }


           // Register the audio listener provided by Wallpaper Engine.
           window.wallpaperRegisterAudioListener(wallpaperAudioListener);
      </script>
 </body>

The code is based on this which gives a bit more detail on how the code works. The bar-values are coming from another script that store settings changes.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/Lsq4CA9

Comments

Popular posts from this blog

How to show number of registered users in Laravel based on usertype?

i'm trying to display data from the database in the admin dashboard i used this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count(); echo $users; ?> and i have successfully get the correct data from the database but what if i want to display a specific data for example in this user table there is "usertype" that specify if the user is normal user or admin i want to user the same code above but to display a specific usertype i tried this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count()->WHERE usertype =admin; echo $users; ?> but it didn't work, what am i doing wrong? source https://stackoverflow.com/questions/68199726/how-to-show-number-of-registered-users-in-laravel-based-on-usertype

Why is my reports service not connecting?

I am trying to pull some data from a Postgres database using Node.js and node-postures but I can't figure out why my service isn't connecting. my routes/index.js file: const express = require('express'); const router = express.Router(); const ordersCountController = require('../controllers/ordersCountController'); const ordersController = require('../controllers/ordersController'); const weeklyReportsController = require('../controllers/weeklyReportsController'); router.get('/orders_count', ordersCountController); router.get('/orders', ordersController); router.get('/weekly_reports', weeklyReportsController); module.exports = router; My controllers/weeklyReportsController.js file: const weeklyReportsService = require('../services/weeklyReportsService'); const weeklyReportsController = async (req, res) => { try { const data = await weeklyReportsService; res.json({data}) console

How to split a rinex file if I need 24 hours data

Trying to divide rinex file using the command gfzrnx but getting this error. While doing that getting this error msg 'gfzrnx' is not recognized as an internal or external command Trying to split rinex file using the command gfzrnx. also install'gfzrnx'. my doubt is I need to run this program in 'gfzrnx' or in 'cmdprompt'. I am expecting a rinex file with 24 hrs or 1 day data.I Have 48 hrs data in RINEX format. Please help me to solve this issue. source https://stackoverflow.com/questions/75385367/how-to-split-a-rinex-file-if-i-need-24-hours-data