Drawing and animating

by soggydoughnut54

HTML

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

CSS

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

JavaScript

/*************
variables to make program work
*************/
//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";
//size
var size = 10;
//variables for rectangles

/***********
function for drawing stuff
ALL OF YOUR CODE GOES HERE vvvv
************/
//noodle backround
var noodle = new Image(noodle);
noodle.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzeLV4wJGeZYOuox_SjUTb1uo0TZWMwOClLyNnfWN0IsGtKO5p"
context.drawImage(noodle, 0, 0, 500, 500)
//noodle ad
  //text
function draw(Rect) {
size = size + 5
    //color rect 1
    context.fillStyle = "Black";
    //shape rect 1
    context.fillRect(0, 0, 30, 500);
    //color rect 5
    context.fillStyle = "Black";
    //shape rect 5
    context.fillRect(470, 0, 30, 500);
    
   
    //color rect 2
    context.fillStyle = "white";
    //shape rect 2
    context.fillRect(140, 130, 200, 200);
    
    
    //color rect 3
    context.fillStyle = "red";
    //shape rect 3
    context.fillRect(160, 160, size, size);
    
    
     //color rect 4
    context.fillStyle = "yellow";
    //shape rect 4
  context.fillRect(220, 220, size, size);
  //text
  context.fillStyle = "black"
  var ctx = canvas.getContext("2d");
ctx.font = "20px Arial";
ctx.fillText("now available in different flavors",30,400);
  //text
  context.fillStyle = "black"
  var cta = canvas.getContext("2d");
cta.font = "30px Arial";
cta.fillText("Nissin cup noodles",140,220);
  //text
  context.fillStyle = "black"
  var ctb = canvas.getContext("2d");
ctb.font = "20px Arial";
ctb.fillText("Do not microwave!",30,370);
}
/************
Call the function
************/
draw();