Drawing and animating

by DavisC_WL

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 flakes = new Image();
flakes.src = "https://i.postimg.cc/mg3zT9q7/flakes.png";
//variables for rectangles

/***********
function for drawing stuff
ALL OF YOUR CODE GOES HERE vvvv
************/
function draw() {
    //color
    context.fillStyle = "grey";
    //shape
    context.fillRect(0, 0, 500, 500);
    context.drawImage(flakes, 0, 0, 200, 300)
    var canvas = document.getElementById("myCanvas");
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Do you want the Frosted Flakes?", canvas.width/2, canvas.height/2); 

}
/************
Call the function
************/
draw();