This lab will have a program draw a rectangle on the screen and allow the user t
ID: 3819149 • Letter: T
Question
This lab will have a program draw a rectangle on the screen and allow the user to change the color/size of the rectangle. The program will store in the browser the settings of the color/size so that upon revisiting the page, the values are restored.
Set the dimensions of the canvas to 800x600
Have 3 (or more) colors available to draw a rectangle.
Draw a rectangle in the center of the screen the size100x50 pixels.
The user can press the arrow keys to change the shape of the rectangle, keeping the rectangle at the center of the screen.
After each change, save the settings of the dimensions/color to the browser's localStorage
When the user closes (or revisits the page), the rectangle and colors should be the same choice and size as the way the user last left it.
Offer a reset button, to reset the program to the default colors/size.
Make sure you user interface reflects what is drawn on the screen (this is importance when setting the values from the localStorage).
Writing it in HTML5
Explanation / Answer
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Canvas Square</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
var size = 1;
var colorValue = 1;
var rectColor = "#FCEAB8";
var width = 600;
var height = 400;
function init(){
updateCanvas();
}
function updateCanvas(){
size = document.getElementById("myHiddenRect").value;
colorValue = document.getElementById("myHiddenColor").value;
if(size == 2){
width = 300;
height = 200;
}
else if(size == 0){
width ==100;
height = 50;
}
if(colorValue == "2"){
rectColor = "#43A9D1";
}else if(colorValue == "0"){
rectColor = "#5E4130";
}
var myCanvas = document.getElementById("myCanvas");
myCanvas.width = 800;
myCanvas.height = 600;
var context = myCanvas.getContext("2d");
context.fillStyle = rectColor;
context.fillRect(0, 0, width, height);
}
function changeColor(){
colorValue = (colorValue + 1)%3;
document.getElementById("myHiddenColr").value = colorValue;
var myCanvas = document.getElementById("myCanvas");
myCanvas.width = 800;
myCanvas.height = 600;
var context = myCanvas.getContext("2d");
context.fillStyle = rectColor;
context.fillRect(0, 0, width, height);
}
function changeSize(){
size = (size + 1) % 3;
document.getElementById("myHiddenRect").value = size;
var myCanvas = document.getElementById("myCanvas");
myCanvas.width = 800;
myCanvas.height = 600;
var context = myCanvas.getContext("2d");
context.fillStyle = rectColor;
context.fillRect(0, 0, width, height);
}
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<input type="button" name="DecideColor" value = "Color">
<input type="button" name="DecideSize" value="Size">
<input type="hidden" name="myHiddenColor" id="myHiddenColor" value="1" />
<input type="hidden" name="myHiddenRect" id="myHiddenRect" value="1"/>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.