Создание прозрачного текстового поля внутри html canvas, которое отображается поверх холста

Question

как бы я go о создании прозрачного текстового поля внутри холста? любое элегантное решение? Я прочитал, чем я могу сделать прозрачное поле ввода, и положение над холстом, но как сказал бы холст сохранить слова, введенные в этом текстовом поле? был бы признателен за любые решения

Answer 1

var canvas = document.getElementById('canvas');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
        ctx.moveTo(110, 75);
        ctx.arc(75, 75, 35, 0, Math.PI, false);  // Mouth (clockwise)
        ctx.moveTo(65, 65);
        ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Left eye
        ctx.moveTo(95, 65);
        ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Right eye
        ctx.stroke();
    }

    
    var inp = document.getElementById("input");
    var para = document.getElementById("p1");
    // Check browser support
    if (typeof(Storage) !== "undefined") {
        inp.value = localStorage.getItem("x");
    }
    else {
        para.innerHTML = "Sorry, your browser does not support Web Storage...";
    }


        function abc(){
            if (typeof(Storage) !== "undefined") {
                // Store
                localStorage.setItem("x", inp.value);
                // Retrieve
                inp.value = localStorage.getItem("x");
            } 
            else {
                para.innerHTML = "Sorry, your browser does not support Web Storage...";
            }
        }
    

        #canvas {
            position:absolute;
            border: 1px solid black;
            height: 100px;
          }
          input {
              
             position:absolute;
             left:8px;
             top: 16px;
              background-color: transparent;
              border: 0px;
              width: 202px;
              height: 100px;
              font-size: 200%;
          }

<div>
        <canvas id="canvas"></canvas>
        <input onkeydown="abc()" type="text" id="input">
        <p id="p1"></p>
    </div>

вы можете увидеть такую ​​ошибку

{
  "message": "Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag.",
  "filename": "https://stacksnippets.net/js",
  "lineno": 50,
  "colno": 21
}

при непосредственном запуске сниппета, поэтому вы должны выполнить код через IDE (nodepad, nodepad ++, vscode, скобки, sublime et c.) для вашего браузера, тогда он будет работать

Надеюсь, это сработает для вас.