New projects and new features are going to be added soon. I am working on it, finally have some time. If you have any questions or suggestions, please contact me: workit.js@gmail.com. Currently I am working on BoostBalls project explanation.

This is a free project, and in order for it to continue being free, please consider supporting it.

Project setup

Stars - project

Before you start this project you should know:

Preview

Setup Files and Folders

Every project begins by setting up the necessary files and folders

In configuration setup, we will follow these steps. First, we create the main HTML file and name it index.html. Next, we create two files index.js and index.css. (1.0)

1.0Setup files and folders

It is a small project, so we don't need folders. All code will be in those files.

Edit index.html

We just created the index.html file. Now we need to edit this file in order to display it in browser.

index.html

<!Doctype html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width" initial-scale="1" />
 <title>Stars</title>
 <link rel="stylesheet" href="./index.css" />
</head>
<body>
 <canvas></canvas>
 <script src="./index.js"></script>
</body>
</html>

Remove default margin

We need to remove the default margin from the body so the canvas can occupy the full viewport. Also make body not to show overflowed elements, otherwise the scrollbar will appear.

index.css

body {
 margin: 0; 
 overflow: hidden; 
}

We also want canvas to be color of #141a1f and the canvas always to be full size of the viewport.

index.css

canvas {
 width: 100%; 
 height: 100%; 
 background-color: #141a1f; 
}

Initializing canvas

Let's set up the canvas to work with it in the index.js file.

index.js

const canvas = document.querySelector("canvas"); 
const ctx = canvas.getContext("2d");

Now, let's make the canvas the full width and height of the viewport. The canvas has properties like width and height for this purpose.

The window object provides us with innerWidth and innerHeight, which returns the width and height of the current viewport.

Be careful! If you set the width and height for the canvas in a CSS file, those values will affect the visible canvas but not the real canvas. To adjust the size of the actual canvas for drawing, you should use the width and height attributes in HTML or set them as properties of the canvas in JavaScript

innerWidth and innerHeight

index.js

canvas.width = innerWidth; 
canvas.height = innerHeight;

The innerWidth and innerHeight are properties of the global window object, so there's no need to write window.innerWidth or window.innerHeight