HTML 5 Canvas: Solar System
Create a solar system with the Canvas API using Javascript
This is what we will be creating in this tutorial:
Everything you see is done using javascript. Each planet will have its own moon that will also rotate around it. (Completly avoiding the current solar system by giving every planet just one moon).
Background
I have only been learning the Canvas API for about a week or so and have watched some YouTube videos by Chris and on his website at https://chriscourses.com/ .
Let’s Get Started
To start off, download this canvas boilerplate made by Chris. It’s just a project setup to get the necessary HTML, CSS, and Javascript files out there.
Run npm install inside the directory where you have this boilerplate. This will install the necessary dependencies in order to get the project to run.
Next, in the same terminal, run npm start. Open a browser and go to localhost:3000. You will see the following:
