This program draws a rectangle with button\'s option changing the colors. I need
ID: 3819557 • 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
Hello, I viewed this page on browser and i observed that key directions were not correct. On left key it was decreasing height and so on.
I have corrected it and put the comments inside the code.
Here is the corrected code.
<!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) {
// Here i have corrected the co-ordinates for correct key combinations
case 37:
x=x-5; // on left key decrease width
myFunction1(current_color,x,y);
break;
case 38:
y=y+5;// on up key increase height
myFunction1(current_color,x,y);
break;
case 39:
x=x+5;// on right key increase width
myFunction1(current_color,x,y);
break;
case 40:
y=y-5;// on down key decrease height
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>
If you have any doubts or queries regarding this solution then please do comment.
Thanks.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.