This lab will have a program draw a rectangle on the screen and allow the user t
ID: 3815237 • 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
<html>
<body>
<canvas id="myCanvas" width="300" height="150">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeRect(20, 20, 150, 100);
</script>
<p><strong>Note:</strong> The canvas tag is not supported in Internet
Explorer 8 and earlier versions.</p>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.