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'.

Expert Solution

Answer:

Raw code:

<!DOCTYPE html>
<html>
   <head>
       
       <title>Canvas</title>
   </head>
   
   <body>
       
       <center>
           
           <h2>Press 's' on keyboard to display dot in the center of canvas</h2>
           
       <canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">

       </canvas>
       
       <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>
       
       </center>
       
   </body>
   
</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.

venereology answered 10 months ago

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...

For both JavaScript and HTML: ---------------------------------------------------- Write and test JavaScript scripts for the two exercises that...

For both JavaScript and HTML: ---------------------------------------------------- Write and test JavaScript scripts for the two exercises that follow, debug (if necessary). When required to write a function, you must include a script to test the function with at least two different data sets. In all cases, for testing, you must write an HTML file that references the JavaScript file. Output an HTML table of the numbers from 2 to 8 along with their squares and cubes. Create a function titled counter that takes...

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 a C++ program that asks the user to enter in three numbers and displays the...

Write a C++ program that asks the user to enter in three numbers and displays the numbers in ascending order. If the three numbers are all the same the program should tell the user that all the numbers are equal and exits the program. Be sure to think about all the possible cases of three numbers. Be sure to test all possible paths. Sample Runs: NOTE: not all possible runs are shown below. Sample Run 1 Welcome to the order...

Problem Description: Write a program that prompts the user to enter a directory and displays the...

Problem Description: Write a program that prompts the user to enter a directory and displays the number of the files in the directory. Analysis: (Describe the problem including input and output in your own words.) Design: (Describe the major steps for solving the problem. How do you use recursion to solve this problem.) Coding: (Copy and Paste Source Code here. Format your code using Courier 10pts) Name the public class Exercise18_29 Testing: (Describe how you test this program)

use VISUAL STUDIO CODE to write this javascript program Exercise 1 (a) Create a HTML file...

use VISUAL STUDIO CODE to write this javascript program Exercise 1 (a) Create a HTML file that uses createElement and appendChild to dynamically insert three paragraphs when a button is clicked. (b) Create a HTML file that includes JavaScript that is similar to: let recs = [“my item …1”,”my item…2”, …] i.e. an array that contains several CSV item records. When the user clicks a button, each array element will be rendered as a list element. Use a HTML list....

Write a program in javascript to encrypt and decrypt the user input using the caesar algorithm...

Write a program in javascript to encrypt and decrypt the user input using the caesar algorithm with the substitution algorithm. Specify the min and max of the message user can enter to encrypt. Specify the length of the key user can enter to encrypt and decrypt the message. document your design by words or diagrams.

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%...

Question