What do the above input’s create? We will now need to define the functions when the input is changed. Add the following code within your script tags below:
//global variables
var canvOne = document.getElementById("canvas");
var ctx = canvOne.getContext("2d");
function doLime() {
canvOne.style.backgroundColor ="lime";
}
function doYellow() {
//Add code so that the background becomes yellow
}
function makeRectangles() {
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 40, 40);
}
function makeText() {
ctx.fillStyle="black";
ctx.font = "30px Arial";
ctx.fillText("Hello", 10, 80);
}
function doColor() {
var colorinput = document.getElementById("clr");
var color = colorinput.value;
canvOne.style.backgroundColor = color;
}
function doSquare() {
var sliderInput = document.getElementById("sldr");
var value = sliderInput.value;
//larger will ovewrite smaller, so need to clear
ctx.clearRect(0, 0, canvOne.width, canvOne.height);
ctx.fillStyle = "yellow";
ctx.fillRect(10, 10, value, value);
}
Guess My Number
Guess My Number
I am thinking of a number between 1 and 100...try to guess it!