I was looking for help displaying a JavaScript file onto the front of my webpage. When connecting js file to html it doesn't display the file onto the webpage. looking into inspect it shows that the canvas is there as well as testing to see if the js file is connected through console shows that it is connected. I don't know how to fix this. here is the image that shows the canvas is on the webpage
here is the code:
var canvas = document.createElement('canvas');
var c = canvas.getContext('2d');
const numStars = 500;
let stars = [];
function setup() {
createCanvas(500, 500);
stroke(255);
strokeWeight(2);
for (let i = 0; i < numStars; i ) {
stars.push(new Star(random(width), random(height)));
}
}
function draw() {
background(0, 50);
const acc = map(mouseX, 0, width, 0.005, 0.2);
stars = stars.filter(star => {
star.draw();
star.update(acc);
return star.isActive();
});
while (stars.length < numStars) {
stars.push(new Star(random(width), random(height)));
}
}
class Star {
constructor(x, y) {
this.pos = createVector(x, y);
this.prevPos = createVector(x, y);
this.vel = createVector(0, 0);
this.ang = atan2(y - (height / 2), x - (width / 2));
}
isActive() {
return onScreen(this.prevPos.x, this.prevPos.y);
}
update(acc) {
this.vel.x = cos(this.ang) * acc;
this.vel.y = sin(this.ang) * acc;
this.prevPos.x = this.pos.x;
this.prevPos.y = this.pos.y;
this.pos.x = this.vel.x;
this.pos.y = this.vel.y;
}
draw() {
const alpha = map(this.vel.mag(), 0, 3, 0, 255);
stroke(255, alpha);
line(this.pos.x, this.pos.y, this.prevPos.x, this.prevPos.y);
}
}
function onScreen(x, y) {
return x >= 0 && x <= width && y >= 0 && y <= height;
}@import url("https://fonts.googleapis.com/css2?family=DynaPuff:wght@600&family=Shadows Into Light&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "DynaPuff", cursive;
}
.canvas {
height: 100%;
width: 100%;
display: flex;
position: absolute;
}
body {
min-height: 25%;
background: linear-gradient(#868686, #000000);
}
.navbar-container {
display: flex;
}
.navbar {
max-width: 1560px;
padding: 20px;
font-size: 14px;
display: flex;
justify-content: space-between;
align-items: center;
margin: auto;
}
ul {
text-transform: uppercase;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
}
ul li {
list-style: none;
margin-left: 20px;
}
ul li a {
text-decoration: none;
padding: 6px 15px;
color: #ffff;
border-radius: 20px;
transition: all 0.3s ease-in-out;
}
ul li a:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
ul li a:active {
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease-in-out
}
.jumping-letters {
/* make the transformation smooth over 0.5 seconds */
animation: jump 1s infinite;
transition: all 0.3s ease-in-out;
/* apply the jump animation */
}
@keyframes jump {
50% {
transform: translateY(-5px);
transition: all 0.3s ease-in-out/* move the letters up by 10 pixels */
}
}
.hello {
color: #ffff;
display: grid;
margin: 0;
padding: 100px;
place-items: center;
min-height: 100vh;
width: 100%;
text-align: center;
}
.text {
flex: auto;
color: white;
white-space: nowarp;
font-size: 5vw;
font-size: 1em;
z-index: 5;
}
.projects {
position: relative;
color: #000000;
}
.education {
position: relative;
color: #000000;
}
.aboutme {
position: relative;
color: #000000;
}
.resume {
position: relative;
color: #000000;
}
.body-container1 {
background-color: #fff;
align-items: center;
border-radius: 6px;
box-sizing: content-box;
margin: 0px auto;
max-width: 75vw;
padding: 15px;
width: 100%;
}
.body-container1 {
background-color: #fff;
align-items: center;
border-radius: 6px;
box-sizing: content-box;
margin: 0px auto;
max-width: 75vw;
padding: 15px;
width: 100%;
}
.body-container2 {
background-color: #fff;
align-items: center;
border-radius: 6px;
box-sizing: content-box;
margin: 0px auto;
max-width: 75vw;
padding: 15px;
width: 100%;
}
.body-container3 {
background-color: #fff;
align-items: center;
border-radius: 6px;
box-sizing: content-box;
margin: 0px auto;
max-width: 75vw;
padding: 15px;
width: 100%;
}
.body-container4 {
background-color: #fff;
align-items: center;
border-radius: 6px;
box-sizing: content-box;
margin: 0px auto;
max-width: 75vw;
padding: 15px;
width: 100%;
}
.sec {
padding-bottom: 50px;
border-radius: 6px;
}<!DOCTYPE html>
<html lang="en">
<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>Mustafa Said</title>
<link rel="stylesheet" href="./style.css" />
</head>
<div>
<canvas >
<script src="space.js"></script>
</canvas>
<div >
<div >
<div >
<ul >
<li><a href="#projects">Projects</a></li>
<li><a href="#education">Education</a></li>
<li><a href="#aboutme">About me</a></li>
<li><a href="#resume">Resume</a></li>
</ul>
</div>
</div>
<div >
<div >
<div>
<p >Hello, I'm</p>
<h1 >Mustafa Said</h1>
<h3 >but most call me moosee</h3>
</div>
</div>
</div>
</div>
<section id="projects" >
<div >
<div >
<div >
<h2>Projects</h2>
<div >
<h3>The Illumihat - Python</h3>
<p>
</p>
<h3>Project Snowflake - JavaScript</h3>
<p></p>
<h3>Personal Portfolio - HTML, CSS</h3>
you're looking right at it :)
</div>
</div>
</div>
</div>
</section>
<section id="education" >
<div >
<div >
<div >
<h2>Education</h2>
<div >
<h3>
</h3>
<p>
</p>
</div>
</div>
</div>
</div>
</section>
<section id="aboutme" >
<div >
<div >
<div >
<h2>About Me</h2>
<div >
<p>
</p>
</div>
</div>
</div>
</div>
</section>
<section id="resume" >
<div >
<div >
<div >
<h2>Resume</h2>
<div >
<p>
</p>
</div>
</div>
</div>
</div>
</section>
<footer></footer>
</div>
</html>CodePudding user response：
You should probably remove personal information from the code that you posted, such as your name, location, university, and faculty.
That being said, your JavaScript is likely loading but there are a couple of issues that are causing it to not run.
Firstly, don't put the script inside the canvas tags. And remove the # prefixes from your HTML. The relevant lines in your HTML should look like:
<canvas ></canvas>
<script src="space.js"></script>
Secondly, your JavaScript is creating a new canvas instead of loading the element that's already on your page. Use querySelector to find the <canvas ></canvas> element on the page. The relevant lines in your JavaScript should look like
var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
Finally, your JavaScript code isn't actually running any of the functions that you've written. At the end of your code put:
setup();
draw();
CodePudding user response：
You need to make a few changes to make your website load your script and run it.
First of all, canvas tag cannot have script tag as a child:
<canvas />
<script src="space.js"></script>
The second change is that you don't need to create a canvas tag because you have it in your html already. However, you need get reference to that canvas tag from your script:
var canvas = document.getElementsByTagName('canvas');
The third and actually most trickiest thing is that your script can start execution BEFORE your HTML page is fully loaded and parsed into DOM tree. Therefore, before trying to do document.getElementsByTagName('canvas') you need to make sure that the page is fully loaded.
To do this you need something like:
var canvas;
var c;
addEventListener('DOMContentLoaded', (event) => {
canvas = document.getElementsByTagName('canvas');
c = canvas.getContext('2d');
// now we have everything to start setup() and other functions
});
Let me know if this helps.