How do I move the position of canvas using either css or javascript?

Question

this is my first question here. I am fairly new to html, css, and javascript.

What I wanted to achieve was similar to this mockup i've created: my website mockup

I've tried to replace the rectangle on the left side with javascript code to achieve a similar effect. The javascript code was taken from this codepen:

https://codepen.io/vaaghu/pen/abmYGYz

I've nudged the canvas a bit to the right, but if i extend the canvas width and height, the canvas does extend, but the circle animations don't. How do I extend this animation?

 var canvas = document.querySelector("canvas") canvas.width = 800; canvas.height = 1600; var c = canvas.getContext("2d"); var mouse = {x:innerWidth/2,y:innerHeight/2} window.addEventListener("mousemove",(event)=>{ mouse.x = event.x; mouse.y = event.y; }) window.addEventListener("resize",()=>{ canvas.width = window.innerWidth; canvas.height = window.innerHeight; int(); }) function Circle(x, y,dx,dy,radius,color) { this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.radius = radius; this.color = color var maxRadius = 30; this.draw = function() { c.beginPath(); c.arc(this.x,this.y,this.radius,0,Math.PI * 2,false); c.fillStyle = color c.fill(); } this.update = function(){ if(this.x+this.radius > innerWidth || this.x-this.radius < 0) { this.dx = -this.dx; } if(this.y+this.radius > innerHeight || this.y -this.radius < 0 ) { this.dy = -this.dy; } if( mouse.x - this.x > -50 && mouse.x - this.x < 50 && mouse.y - this.y >-50 && mouse.y - this.y < 50) { if (this.radius < maxRadius) { this.radius += 1 } } else { if (this.radius > radius) { this.radius -= 1 } } this.x += this.dx; this.y += this.dy; this.draw(); } } var colorArray = ["#F5871A","#81968F","#DFAA2F","#D76034","#F5411D"]; var circleArray = [] function int() { circleArray = [] for (let i = 0; i < 700; i++) { var x = Math.random() * window.innerWidth; var y = Math.random() * (window.innerHeight ); var radius = Math.random() * 5 + 2; var dx = Math.random() - 0.5; var dy = Math.random() - 0.5; var color = colorArray[Math.floor(Math.random()*4)] circleArray.push(new Circle(x,y,dx,dy,radius,color)) } } int() function animate() { requestAnimationFrame(animate); c.clearRect(0,0,innerWidth,innerHeight) for (let i = 0; i < circleArray.length; i++) { circleArray[i].update() } } animate();

 .mediaViewInfo { --web-view-name: Homepage; --web-view-id: Homepage; --web-scale-on-resize: true; --web-show-navigation-controls: true; --web-enable-deep-linking: true; --web-page-font: arial, Manrope; }:root { --web-view-ids: Homepage; } * { margin: 0; padding: 0; box-sizing: border-box; border: none; } #Homepage { position: absolute; width: 100%; height:450%; font-family: arial, Manrope; background-color: rgba(255,255,255,1); overflow: hidden; --web-view-name: Homepage; --web-view-id: Homepage; --web-scale-on-resize: true; --web-show-navigation-controls: true; --web-enable-deep-linking: true; --web-page-font: arial; } canvas { background: #FFFF05; background-image: linear-gradient(to bottom, #81968F99, #FFE636CC, #FF000066); margin: 50% 0% 0% 8%; padding: 0vh 0vh 0vh 0vh; z-index:-1; width:auto; } #Wave_Vid { position: absolute; left: -19px; top: -1920px; width: 100vh; height: 100vh; overflow: hidden; }.Wave_container { overflow: visible; } #MIDDLEcontainer { position:absolute; top: 24%; left:59%; } #MIDDLE { overflow: visible; } #Good_ideas_can_take_time { line-height: 0.8; width: 100%; text-align: left; padding-right: 10%; font-family: Manrope, arial; font-style: normal; font-weight: bold; font-size: 15vh; color: rgba(129,150,143,1); margin-bottom: 30px; } #And_execution_takes_even_more { width: 100%; line-height: 1em; text-align: left; padding-right: 30vh; font-family: Manrope, arial; font-style: normal; font-weight: normal; font-size: 5vh; color: rgba(129,150,143,1); margin-bottom: 20px; } #Line_ { fill: transparent; stroke: rgba(129,150,143,1); stroke-width: 4px; stroke-linejoin: miter; stroke-linecap: butt; stroke-miterlimit: 4; shape-rendering: auto; }.Line_ { width: 509px; height: 10px; transform: matrix(1,0,0,1,0,0); margin-bottom: 40px; } #Midcontainer { position:absolute; } #Mid { float:bottom; position:absolute; }.MySkills { position: relative; overflow:visible; height: 1em; text-align: left; font-family: Manrope, arial; font-style: normal; font-weight: lighter; font-size: 12vh; color: rgba(129,150,143,1); letter-spacing: -0.85px; }

 <,DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>wbdg portfolio</title> <link rel="stylesheet" type="text/css" id="applicationStylesheet" href="../faux styles.css"/> </head> <body> <div> <canvas></canvas> <script id="jssomething" type="text/javascript" src="../faux scripts:js"></script> <script src="https.//kit.fontawesome.com/4f3ce16e3e.js" crossorigin="anonymous"></script> <div id="MIDDLEcontainer"> <div id="MIDDLE"> <div id="Good_ideas_can_take_time"> <p>Good ideas can take time.</p> </div> <div id="And_execution_takes_even_more"> <span>And execution takes even more.</span> </div> <svg class="Line_" viewBox="0 0 674 4"> <path id="Line_" d="M 0 0 L 674 0"> </path> </svg> <div id="Midcontainer"> <div id="Mid"> <div class="MySkills"> Photos </div> <div class="MySkills"> Illustrations </div> <div class="MySkills"> Videos </div> <div class="MySkills"> Animations </div> <div class="MySkills"> Branding </div> </div> </div> </div> </div> </div> </body> </html>

Answer 1

If I understand correctly, change these lines in int() function:

  var x = Math.random() * window.innerWidth;
  var y = Math.random() * (window.innerHeight ) ;

to this:

  var x = Math.random() * canvas.width;
  var y = Math.random() * canvas.height;