This program draws a rectangle with button\'s option changing the colors. I need
ID: 3819555 • Letter: T
Question
This program draws a rectangle with button's option changing the colors. I need help with the arrow keys changing the size of the rectangle.
HTML
<!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>
Explanation / Answer
The Above code is working fine . After completion of your execution try to click on red button then red colour rectangular will come in the window. Now Press Arrow keys to increase or decrese the size of the window.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.