How to add a HTML element to the canvas element using JavaScript?

Question

This is the answer to the question which I asked above. You will get the input area on canvas area with this code at the 100px from both top and left, if you want to change the position of the text area you change the value. Similarly you can append any HTML element in the canvas you want. Enter the element name in createElement area in script you will be able to create the HTML element.

Thank You..

!-- HTML CONTENT-->
<body>
  <canvas id="canvas" style="background-color:rgb(171, 171, 250)"></canvas>
  <!---->
  
  <!--JavaScript CONTENT-->
  <script>

  //Canvas area on the screen
  var res = window.devicePixelRatio || 1,
          scale = 1 / res;
          var canvas = document.querySelector("#canvas");
          var ctx = canvas.getContext('2d');
          canvas.height = window.innerHeight * res;
          canvas.width = window.innerWidth * res;
          canvas.style.height = window.innerHeight + 'px';
          canvas.style.width = window.innerWidth + 'px';
          ctx.scale(res, res);
  


  //adding input tag on canvas
  function addInput()
                          {
                              var input = document.createElement('input');
                              input.type = 'text';
                              input.style.position = 'absolute';
                              input.style.left = '100px'; //x-axis location of textarea
                              input.style.top = '100px'; //y-axis location of textarea
                              input.style.background = 'white';
                              input.style.width = '75px';
                              input.style.fontWeight = 'bolder';
                              document.body.appendChild(input);
                              input.focus();
                          }
  addInput();
  </script>
  <!--JavaScript End Here-->
  </body>

It looks like you should have posted an answer to your own question, not include the answer in the question. The code doesn't do what you think it does, though, the input element is appended to body element, not to a canvas element. — Teemu
– Teemu, Commented Oct 22, 2022 at 8:11

Franco Gabriel · Accepted Answer · 2022-10-22 06:14:07Z

1

You cannot add html to canvas for now, as canvas doesn't have any method related to this. You can try this library http://html2canvas.hertzen.com/index.html but in the end it'll be only a draw in canvas of the input with no functionalities.

I don't know why you want to do that but you can place the input in front of the canvas with position: absolute and positioning wherever you want. It'll maintain all event listeners and methods you need for user to interact.

answered Oct 22, 2022 at 6:14

Franco Gabriel

5784 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add a HTML element to the canvas element using JavaScript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related