HTML5 This lab will have a program draw a rectangle on the screen and allow the
ID: 3819151 • Letter: H
Question
HTML5
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>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="800" height="600">
Your browser does not support the HTML5 canvas tag.
</canvas>
<button>Red</button>
<button>Blue</button>
<button>Green</button>
<button>Default</button>
<p>press arrow keys to change the size</p>
<script>
var current_color;
var x=100;
var y=50;
function myDefaultFunction(color) {
var x1=100;var y1=50;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle ="#ffffff" ;
ctx.fillRect(0,0,800,600);
ctx.fillStyle =color ;
ctx.fillRect(400-(x1/2),300-(y1/2),x1,y1);
save(x1,y1,color);
}
function myFunction(color) {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle =color ;
current_color = color;
ctx.fillRect(400-(x/2),300-(y/2),x,y);
}
function myFunction1(current_color,x,y) {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle ="#ffffff" ;
ctx.fillRect(0,0,800,600);
ctx.fillStyle =current_color ;
ctx.fillRect(400-(x/2),300-(y/2),x,y);
}
document.onkeydown = function() {
switch (window.event.keyCode) {
case 37:
y=y-5;
myFunction1(current_color,x,y);
break;
case 38:
x=x+5;
myFunction1(current_color,x,y);
break;
case 39:
y=y+5;
myFunction1(current_color,x,y);
break;
case 40:
x=x-5;
myFunction1(current_color,x,y);
break;
}
}
function save()
{
if (typeof(Storage) !== "undefined")
{
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
}
}
</script>
</body>
</html>
i couldnt implement save feature due to lack of time
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.