HTML5 Draw a black rectangle in the center of a white canvas. Use the slider fro
ID: 3828603 • Letter: H
Question
HTML5
Draw a black rectangle in the center of a white canvas.
Use the slider from jQuery Mobile to alter the RGB values of a rectangle to allow the user to select a color of a rectangle. Do not use the color picker tool, I want you to write you own way to select a color manually by RGB values). If can additionally use the color picker if you wish.
https://www.w3schools.com/cssref/css_colors_legal.asp
https://api.jquerymobile.com/slider/
Have a slider that makes the rectangel larger/smaller.
https://api.jquerymobile.com/checkboxradio/
Use a radio button, to toggle the color of the background/rectangle.
Have a checkbox that will hide the rectangle on the screen.
Have a reset button to put things back to the begining values.
Explanation / Answer
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(188, 50, 200, 100);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
</script>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.