Draw a black rectangle in the center of a white canvas. Use the slider from jQue
ID: 3840763 • Letter: D
Question
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.
Have a slider that makes the rectangel larger/smaller.
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.
This is what I have so far!
<head>
<style>
/*Define body*/
body
{
/*Set margin*/
margin: 0px;
/*Set padding */
padding: 0px;
}
/*Set style */
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
/*Define canvas*/
var canvas = document.getElementById('myCanvas');
/*Define context */
var context = canvas.getContext('2d');
/*Begin*/
context.beginPath();
/*Define rectangle dimensions*/
context.rect(188, 50, 200, 100);
context.fillStyle = 'yellow';
/*Fill */
context.fill();
/*Set width */
context.lineWidth = 7;
/*Set stroke */
context.strokeStyle = 'black';
/*Set stroke */
context.stroke();
/*End*/
</script>
</body>
<div class="ui-field-contain">
<fieldset data-role="controlgroup">
<legend>Choose color:</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom">
<label for="checkbox-1a">Red</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom">
<label for="checkbox-2a">Blue</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom">
<label for="checkbox-3a">Green</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom">
<label for="checkbox-4a">Yellow</label>
</fieldset>
</div>
<fieldset data-role="controlgroup">
<legend>Toggle:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked">
<label for="radio-choice-1">Yes</label>
</fieldset>
Explanation / Answer
#s1 {
background: url(images/S1.jpg) top no-repeat;
width: 576px;
margin: 0 auto;
padding-top: 7px;
}
#signup h1, h2, p { margin: 0; }
.signup_layer {
border: 1px solid #D7D7D7;
border-top: none;
padding: 0px 5px 7px 6px;
height: 400px;
}
.s1_left{
width:315px;
float:left;
}
.s1_center{
width:45px;
float:left;
padding-top:12px;
}
.s1_right{
width:202px;
float:left;
}
<div id="s1">
<div class="s1_layer">
<div class="s1_left"></div>
<div class="s1_center"></div>
<div class="s1_right"></div>
</div>
</div>
change color as your like
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.