Drawing and animating

by Starsavior

HTML

<canvas width="500" height="500" id="myCanvas"></canvas>.

CSS

#myCanvas {
    border:1px solid #000;
}

JavaScript

/*************
variables to make program work
*************/
var Ypos = 250;
var Xpos = 250;
var size = 10;
var size2 = 10;
var Xpos2 = 250;
var Ypos2 = 250;
var size3 = 10;
var Xpos3 = 250;
var Ypos3 = 250;
var size4 = 10;
var Xpos4 = 250;
var Ypos4 = 250;
//access the canvas
var canvas = document.getElementById('myCanvas');
//access drawing environment
var context = canvas.getContext("2d");
//create a new image
var space = new Image();
space.src = "https://i.postimg.cc/DyNVWvJm/space.jpg";
//variables for rectangles

/***********
function for drawing stuff
ALL OF YOUR CODE GOES HERE vvvv
************/
function draw1() {
    //color
    context.fillStyle = "rgb(255, 255, 255)"
    //shape
    context.fillRect(0, 0, 500, 500);
    //add the new animation
    context.fillStyle = "rgb(192, 192, 192)"
    context.fillRect(Xpos, Ypos, size, size)
    size = size + 18;
   Ypos = Ypos - 9;
    Xpos = Xpos - 9;
}
function draw2() {
    //add the new animation
    context.fillStyle = "rgb(149, 149, 149)"
    context.fillRect(Xpos2, Ypos2, size2, size2)
   size2 = size2 + 18;
   Ypos2 = Ypos2 - 9;
    Xpos2 = Xpos2 - 9;
}
function draw3() {
    //add the new animation
    context.fillStyle = "rgb(82, 82, 82)"
    context.fillRect(Xpos3, Ypos3, size3, size3)
   size3 = size3 + 18;
   Ypos3 = Ypos3 - 9;
    Xpos3 = Xpos3 - 9;
    }
    function draw4() {
    //add the new animation
    context.fillStyle = "rgb(0, 0, 0)"
    context.fillRect(Xpos4, Ypos4, size4, size4)
   size4 = size4 + 18;
   Ypos4 = Ypos4 - 9;
    Xpos4 = Xpos4 - 9;
    }
/************
Call the function
************/
draw1();

//set up the loop
var game= setInterval(draw1, 1000/30)
setTimeout(function(){clearInterval(game);game = setInterval(draw2, 1000/30)}, 1000)
setTimeout(function(){clearInterval(game);game = setInterval(draw3, 1000/30)}, 2000)
setTimeout(function(){clearInterval(game);game = setInterval(draw4, 1000/30)}, 3000)