ZuoTi.Pro
Question

Im stuck. can someone please show me code on how i can make text appear on...

Im stuck. can someone please show me code on how i can make text appear on html canvas.

i want to create a form where someone for example put their name and when submit button is clicked on the form it appear on the canvas.

i am using html javascript. please show code for javascript, canvas, and html.

please let me know if im not making sense. Thank you
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

CODE:-

<!DOCTYPE html>

<html lang="en">

  <head>

    <title>Canvas</title>

  </head>

  <style>

    /* here i am doing a basic styling to make it good better  */

    .count {

      width: 100%;

      display: flex;

      flex-direction: column;

      justify-content: center;

      align-items: center; /* just making the width 100 percent and then using the flex to center the components */

    }

    #userCanvas {

      margin-bottom: 16px;

    }

  </style>

  <body>

    <div class="count">

      <!-- creating a div to hold the items and inside it creating a h1 to print the html canvas and then form -->

      <h1>HTML CANVAS</h1>

      <!-- here i am taking the canvas and setting it height and width and border color -->

      <canvas

        id="userCanvas"

        width="400"

        height="200"

        style="border: 1px solid #04360d"

      ></canvas>

      <form action="#">

        <input id="userInput" type="text" />

        <!-- then creating a form and inside it creating a text box and submit button -->

        <button class="button" onclick="submitCanvas()">SUBMIT</button>

      </form>

    </div>

    <script>

      function submitCanvas() {  // inside the js function

        var c = document.getElementById("userCanvas");  // i am taking the canvas by id

        var userInput = document.getElementById("userInput").value; // then taking the input from the text box

        var ctx = c.getContext("2d");  // initialising the canvas a 2d

        ctx.font = "50px"; // then setting the font

        ctx.fillText(userInput, 10, 50); // then using the filltext method to fill the user input

        // then 10 and 50 are x and y coordinates of the text with respect to the canvas

      }

    </script>

  </body>

</html>

<> HomeworkLib.html > html 1 <!DOCTYPE html> 2 <html lang=en> 3 <head> 4 <title>Canvas</title> 5 </head> 6 <style> 7 /* here i am

35 36 37 38 39 40 41 </div> <script> function submitCanvas() { // inside the js function var c = document.getElementById(use

OUTPUT:-

HTML CANVAS SUBMIT

HTML CANVAS THIS IS TEST THIS IS TEST SUBMIT

FOR ANY OTHER QUERY PLEASE COMMENT.

0 0
Add a comment
Know the answer?
Add Answer to:
Im stuck. can someone please show me code on how i can make text appear on...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Could you please help me write a Javascript code that will show a smiley face picture...

    Could you please help me write a Javascript code that will show a smiley face picture when I click the button. The picture should not display until the button is pressed. Here is my attempt at the code. It does not work. Please keep the code as simple as you can as I am new to coding. Please also use the <div> tag if possible, onclick and use the getElementById. Thank you <html> <body> <img id="exampleImage" src="smileyFace.png" /> <button onclick="pushButton()">Try...

  • Can someone help fix this JAVASCRIPT code according to comment instructions javascriot code: window.addEventListener("click", () =>...

    Can someone help fix this JAVASCRIPT code according to comment instructions javascriot code: window.addEventListener("click", () => { console.log("You clicked?"); }); let button = document.querySelector("button"); button.addEventListener("click", () => { console.log("First Button clicked."); }); // How can we modify this so that it will occur when the 2nd button is clicked? // We need to use querySelectorAll which will produce a nodelist/array of all the buttons. Then we can reference which button we want to apply the click event using [] with...

  • could you please show me what I am doing wrong in the Javascript code below. <html>...

    could you please show me what I am doing wrong in the Javascript code below. <html>   <head> <meta charset="UTF-8"> <title></title> <style> #mytext { color: white; text-align: center; } </style> <script> var words = "The cat sat on the mat"; document.writeln("id='mytext"+ words '); </script>   </head>   <body>   </body> </html>

  • This question relates to Javascript. Could you please show me why my code is not working?...

    This question relates to Javascript. Could you please show me why my code is not working? I want to create 2 text boxes and have the user enter something into both of them. If the text entered into both boxes is identical the a green message is made visible. If the boxes are different a red message is made visable. Please keep it simple because I am new to javascript. <html> <head>               <title></title>        <script>...

  • PYTHON Im stuck, this is one line of code but I just cant remember it... Please...

    PYTHON Im stuck, this is one line of code but I just cant remember it... Please Help! Thank YOU! LIST COMPREHENSION Create a python list, that stores exactly [0,'hi', 2, thi', 4, thi', 6, 'hi', 8, thi') using python list comprehension. You can write one line of python code directly below (in the text box) or you can upload a python file having only one line of code. Write your solution (one line of python code) here. Enter your answer...

  • Can someone please help me write an email to my teacher? On Wednesday she said that...

    Can someone please help me write an email to my teacher? On Wednesday she said that our essay was due on Friday at 1:00 pm. However, I think she made a mistake and she put a different date on Canvas. She put that our essay is due on Saturday at 1:00 pm. I want to email her to tell her about her mistake and that I'm just letting her know so she can let know my classmate and they submit...

  • can someone please help me. I am stuck. Please show all work. Ill rate and leave...

    can someone please help me. I am stuck. Please show all work. Ill rate and leave positive feedback. Thanks. Problem 2. The lap joint shown in Figure below is fastened by four rivets of 3/4-in. diameter. Find the maximum load P that can be applied if the rivets and the plates are made of steel with 500 MPa yield strength. in. in.

  • Can someone please help me write an email to my teacher? On Wednesday she said that...

    Can someone please help me write an email to my teacher? On Wednesday she said that our essay was due on Friday at 1:00 pm. However, I think she made a mistake and she put a different date on Canvas. She put that our essay is due on Saturday at 1:00 pm. I want to email her to tell her about her miatake and that I'm just letting her know so she can let know my classmate and they submit...

  • ----Can someone please help me solve this one using JAVA ----I thank you in advance Create...

    ----Can someone please help me solve this one using JAVA ----I thank you in advance Create an application that reads an HTML file and converts it to plain text. HTML Converter INPUT <h1>Grocery List</h1> <ul>     <li>Eggs</li>     <li>Milk</li>     <li>Butter</li> </ul> OUTPUT Grocery List * Eggs * Milk * Butter

  • Can someone plz help me??? I would like a website that has to do with guitars...

    Can someone plz help me??? I would like a website that has to do with guitars or something to do with music, someone asked me what kind of website I would like to have and that would be awesome. The attributes to be included, are below. I need a small website that to where I need to interlink a CSS file into the HTML file. I don't know to save the files to have to be able to run with...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT