You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hey there. I want to make a simple HTML viewer page but am having trouble getting the canvas to dynamically resize to the width/height of the browser.
I ran into the issue of low image quality when using CSS to dynamically size the canvas. In React it's easy enough to use {window.innerHeight} etc. so I figured I would embed a JS script to listen and edit the canvas tag (see full code below).
However I encounter the following error whenever I use JS to either create or modify the canvas tag:
hydra-synth:3103 Uncaught TypeError: Cannot read properties of null (reading 'clear') at HydraRenderer._initRegl (hydra-synth:3103:15) at new HydraRenderer (hydra-synth:2934:10) at index.html:41:19
I checked the lines given in the error but I can't figure out why they get thrown when the canvas element is modified by JS.
I'd appreciate any thoughts on this issue, full code modified from Hydra inside a webpage below. Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<title>hydra inside a webpage</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css" />
<!-- import the latest version of hydra synth-->
<script src="https://unpkg.com/hydra-synth"></script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
function createResizableCanvas() {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// Function to set canvas size
function setCanvasSize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
// Initialize canvas size
setCanvasSize();
// Handle window resize events
window.addEventListener('resize', function () {
setCanvasSize();
});
}
createResizableCanvas();
var hydra = new Hydra({
canvas: document.getElementById("myCanvas"),
detectAudio: false
})
src(o0)
.scale(1.01)
.blend(osc(10, .1, ({time})=>Math.sin(time*10)+2)
.mult(shape(4, .7, 1e-6)
.modulateKaleid(osc(()=>Math.sin(time*.5)+.1)).rotate(1,80)
.modulateScrollX(osc(()=>Math.sin(time*.4)),.01)
.rotate(.01,3.1)
.scale(()=>Math.sin(time*.52)*.5)
//.color(1.12,-1.04,-1.31)
.brightness(.3)
.modulateScale(noise(.1))), .02)
.modulate(o0,.01)
.out(o0)
speed=.05
</script>
<style>
body {
background-color: black;
margin: 0; /* Remove default margin */
overflow: hidden; /* Prevent scrollbars */
}
</style>
</body>
</html>
The text was updated successfully, but these errors were encountered:
Hey there. I want to make a simple HTML viewer page but am having trouble getting the canvas to dynamically resize to the width/height of the browser.
I ran into the issue of low image quality when using CSS to dynamically size the canvas. In React it's easy enough to use {window.innerHeight} etc. so I figured I would embed a JS script to listen and edit the canvas tag (see full code below).
However I encounter the following error whenever I use JS to either create or modify the canvas tag:
hydra-synth:3103 Uncaught TypeError: Cannot read properties of null (reading 'clear') at HydraRenderer._initRegl (hydra-synth:3103:15) at new HydraRenderer (hydra-synth:2934:10) at index.html:41:19
I checked the lines given in the error but I can't figure out why they get thrown when the canvas element is modified by JS.
I'd appreciate any thoughts on this issue, full code modified from
Hydra inside a webpage
below. Thanks!The text was updated successfully, but these errors were encountered: