Question

In: Computer Science

Write an HTML/Javascript canvas program that displays a black dot in the center after the user...

Write an HTML/Javascript canvas program that displays a black dot in the center after the user presses the 's' button on the keyboard.

Hint: Canvas size should be 500x500 and the black dot should only appear after pressing 's'.

Solutions

Expert Solution

Answer:

Raw code:

<!-- html tag -->
<!DOCTYPE html>
<html>
   <head>
       <!-- head tag -->
       <title>Canvas</title>
   </head>
   <!-- body -->
   <body>
       <!-- center tag to display contnets in the center of page -->
       <center>
           <!-- heading 2 tag to show output on page -->
           <h2>Press 's' on keyboard to display dot in the center of canvas</h2>
           <!-- canves widh and height -->
       <canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
  
       </canvas>
       <!-- java script code -->
       <script type="text/javascript">
           // action listenter to check for s code
           window.addEventListener('keydown',function(e)
           {  
               // key variable
           var key = e.keyCode;
           //if key pressed is s
           if(key == 83){
               //get the id
               var canvas = document.getElementById('myCanvas');
               //get the mid point
           var context = canvas.getContext('2d');
           var centerX = canvas.width / 2;
           var centerY = canvas.height / 2;
           //radius of the dot change it according to your wish
           var radius = 10;
           //draw the shape
               context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
               context.fill();
               }
  
           });
           //close the script tag
       </script>
       <!-- close the center tag -->
       </center>
       <!-- close the body tag -->
   </body>
   <!-- close the html tag -->
</html>

Editor:

output:

after key pressed

Hope this helps you! If you still have any doubts or queries please feel free to comment in the comment section.

"Please refer to the screenshot of the code to understand the indentation of the code".

Thank you! Do upvote.


Related Solutions

Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to...
Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to display the current day and time. b) Write a JavaScript program to print the contents of the current window.   c) Write a JavaScript program where the program takes a random integer between 1 to 10 d) Write a JavaScript program to calculate multiplication and division of two numbers (input from the user). e)Write a JavaScript program to create a new string from a given...
Write an Html Page that uses JavaScript Program to make a Blackjack Game. I need to...
Write an Html Page that uses JavaScript Program to make a Blackjack Game. I need to write an html file (P5.html) that uses JavaScript program to create a Blackjack game. 1. Blackjack Games Rules: a. The object of the game is to "beat the dealer", which can be done in a number of ways: • Get 21 points on your first two cards (called a blackjack), without a dealer blackjack; • Reach a final score higher than the dealer without...
Write a program, ArrayRange, that asks the user to input integers and that displays the difference...
Write a program, ArrayRange, that asks the user to input integers and that displays the difference between the largest and the smallest. You should ask the user the number of integers s/he would like to enter (this will allow you to set the length of the array). Allow the user to input all the numbers and then store them in the array. Search the array for the largest number, then search for the smallest, and finally compute the calculation. Display...
Write an assembly program that lets the user to input only the word MASM and displays...
Write an assembly program that lets the user to input only the word MASM and displays invalid input for any other user inputs.
Write a program in C++ that asks the user for his/her Taxable Income and displays the...
Write a program in C++ that asks the user for his/her Taxable Income and displays the Income Tax owed. Use the following table to calculate the Income Tax: Taxable Income Tax Rate $0 to $9,225 / 10% $9,226 to $37,450 / $922.50 plus 15% of the amount over $9,225 $37,451 to $90,750 / $5,156.25 plus 25% of the amount over $37,450 $90,751 to $189,300 / $18,481.25 plus 28% of the amount over $90,750 $189,301 to $411,500 / $46,075.25 plus 33%...
For this assignment, you will write a tic-tac-toe application in HTML and JavaScript, using an HTML...
For this assignment, you will write a tic-tac-toe application in HTML and JavaScript, using an HTML <canvas> tag. The game will be played "hot seat" where players take turns using the same device. Requirements: The canvas should be 600px tall and wide, with the gameplay area occupying most of the canvas. The X's and O's may be drawn using polygons or large-font text The grid should be drawn using polygons, specifically long, thin rectangles Before & between games, the canvas...
Write a javascript program that asks the user to enter up to 10 golf scores, which...
Write a javascript program that asks the user to enter up to 10 golf scores, which are to be stored in an array. You should provide a means for the user to terminate input prior to entering 10 scores. The program should display all the scores on one line and report the average score. Handle input, display, and the average calculation with three separate array processing functions.
Use HTML&CSS& JavaScript to: 3-4) Write a JQuery Ajax program which can communicate with flicker to...
Use HTML&CSS& JavaScript to: 3-4) Write a JQuery Ajax program which can communicate with flicker to get the last pictures taken from any place or related to any concept(s) the user has written in a textbox, say Sydney, train. Some information associated with the image like its topic, time taken, and its link needs to be appeared with it. 3-5) Develop a server which can serve the file you developed in 3-4. 3-6) Add a plugin to the real jQuery...
Please use Phyton to write a program: Write a program that calculates and displays the total...
Please use Phyton to write a program: Write a program that calculates and displays the total bill at a restaurant for a couple that is dining. The program should collect from the couple, cost of each meal, and the percentage of the final cost that they would like to tip. The sales tax in the state where the restaurant exists is 7.5%. Display to the user, line by line: Total Cost of Both Meals Sales Tax in dollars Tip in...
Design the logic for a program that allows a user to enter 20 numbers, then displays...
Design the logic for a program that allows a user to enter 20 numbers, then displays them in the reverse order of entry. Design the logic for a program that allows a user to enter 20 numbers, then displays each number and its difference from the numeric average of the numbers entered. The program is C++. I need a Pseudocode
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT