Particles part 1

HTML

<html>
<head>
<title>Canvas</title>
<script type="text/javascript">
// When the window has loaded, DOM is ready. Run the draw() function.

</script>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400"></canvas>
</body>
</html>

CSS

#myCanvas{
    background:black;
}

JavaScript

// Create an array to store our particles
var particles = [];

// A function to create a particle object.

function Particle(context) {

    // Set the initial x and y positions
    this.x = 10;
    this.y = 10;

    // Set the radius
    this.radius = 50;

    // Store the context which will be used to draw the particle
    this.context = context;

    // The function to draw the particle on the canvas.
    this.draw = function() {
        // Draw the circle as before, with the addition of using the position and the radius from this object.
        this.context.beginPath();
        this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
        this.context.fillStyle = "rgba(0, 255, 255, 1)";
        this.context.fill();
        this.context.closePath();
    };

    // A function to set the position of the particle.
    this.setPosition = function(x, y) {
        this.x = x;
        this.y = y;
    };
}

// The canvas context if it is defined.
var context;

// Initialise the scene and set the context if possible
function init() {

    var canvas = document.getElementById('myCanvas');
    if (canvas.getContext) {
        
        // Set the context variable so it can be re-used
        context = canvas.getContext('2d');

        // Create and arrange the top left particle
        var particle = new Particle(context);
        particle.setPosition(100, 100);
        particles.push(particle);

        // Create and arrange the top right particle
        particle = new Particle(context);
        particle.setPosition(300, 100);
        particles.push(particle);

        // Create and arrange the bottom left particle
        particle = new Particle(context);
        particle.setPosition(100, 300);
        particles.push(particle);

        // Create and arrange the bottom right particle
        particle = new Particle(context);
        particle.setPosition(300, 300);
        particles.push(particle);
    }
    else {
        alert("Please use a modern...