Form input et textarea dans un canvas

L'élément canvas permet de dessiner, animer, ... dans une page html. Le pilotage des éléments se fait directement en javascript.

A priori un canvas est un simple bitmap (c'est-à-dire un tableau de bits dans lequel est spécifiée la couleur de chaque pixel) et ne supporte pas d'y incorporer des éléments html comme input.
Ceci n'empêche pas de ruser un peu: on peut construire notre canvas, et y superposer des éléments html, comme input et textarea. Le canvas est en position relative tandis que les élements html qu'on souhaite insérer seront positionner absolument à l'intérieur, via css. On peut alors aussi manipuler, animer, ... ces éléments en javascript comme tout autre élément du canvas.

Codes css & html & javascript

Par exemple, on indique les propriétés css soit directement en css, soit en javascript:

<-- le style css: -->
<style>
  .wrap{display:block;margin:auto 0}
  canvas{background:lightblue}
  .wrap, .wrap canvas {width:250px;height:200px;border:1px solid blue}
  .wrap { position:relative }
  .wrap > * { position:absolute }
  #txt{top:10px;left:50px;width:8em;font-size:1.2em;height:1.5em;resize:none;border:2px solid red}
  #nb1{top:50px;appearance:textfield;width:5em}
</style>

<-- le html à proprement parler: -->
<form class="wrap">
  <canvas id="canvas" width="400" height="300"></canvas>
  <textarea id="txt">Hello world</textarea>
  <input type="number" id="nb1" placeholder="nombre 1" min="1" max="1001" step="1" onchange="getnb1();return false;">
  <input type="number" id="nb2" placeholder="nombre 2" value="30" min="1" max="1001" step="1" style="width:2.5em" onchange="getnb2();return false;">
</form>

<-- et le javascript pour finir: -->
<script>
  X=150;Y=100;
  document.getElementById("nb2").style="top:"+Y+"px;left:"+X+"px;width:4em;border:3px solid red;text-align:center";
  function getnb1() {
    nb1=parseFloat(document.getElementById("nb1").value);
    alert(nb1);
  }
  function getnb2() {
    nb2=parseFloat(document.getElementById("nb2").value);
    alert(nb2);
  }
</script>

Pour obtenir le canvas avec ces deux inputs et son textarea:

On peut alors bien sûr dessiner, animer, interagir avec la souris, ... comme dans n'importe quel canvas.
On peut aussi, en suivant ce procédé, utiliser n'importe quel élément html sur un canvas, et donc en apparence dans un canvas.