variables in js

by soggydoughnut54

HTML

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

CSS

#myCanvas {
  border: 1px solid red;
}

JavaScript

var text = "hello"; //string
var color = "red"; //string
var background = "white"; //string
var size = 12; //number
var secret = false; //boolean
var framerate = 10; //number
//my stuff to get the drawing element
var canvas = document.getElementById("myCanvas"); //object
var context = canvas.getContext("2d"); //object
canvas.width = 400;
canvas.height = 200;
/*************
DRAW THE APP
*************/
function draw() {
  //set the background
  context.fillStyle = background;
  context.fillRect(0, 0, canvas.width, canvas.height);
  //write the text
  context.font = size + "px Arial";

  context.fillStyle = color;
  context.fillText(text, 0, 100);
  if (secret) {
    context.fillText("You are super cool!", 0, canvas.height - size);
  }
}
/*******************
CALL THE FUNCTION
*******************/
setInterval(draw, 1000 / framerate);