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)
context.font="12px arial";
context.fillText("fleeb", 250, 80)
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)
context.font="24px arial";
context.fillText("f l e e b", 225, 80)
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)
context.font="48px arial";
context.fillText("f l e e b", 200, 80)
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)
context.font="72px arial";
context.fillText("f l e e b", 80, 80)
size4 = size4 + 18;
Ypos4 = Ypos4 - 9;
Xpos4 = Xpos4 - 9;
}
/************
Call the function
************/
draw1();
//set up the loop
var game= setInterval(draw1,...