Canvas into Jquery Step-CodePudding

I've got a strange problem, I would like to make a signature pad (https://github.com/szimek/signature_pad) into a beautiful jquery step.

But my signature pad CANVAS, works only if is after

</section>
        </form>

If not, I can't write nothing with my mouse.

My project is here : https://jsfiddle.net/jc1agwsk/2/ I don't understant why it doesn't work, and why it works if is not into a step section.

Many thanks

CodePudding user response：

If the canvas element is not working as expected, it could be because it is not properly initialized. A possible solution is to initialize the canvas in JavaScript and then add it to the DOM after the page has loaded.

Here's an example of how to initialize the canvas using JavaScript:

<script>
  // Wait for the page to load
  window.onload = function() {
    // Get the canvas element
    var canvas = document.getElementById("signature-pad");
    // Get the context of the canvas
    var ctx = canvas.getContext("2d");
    // Draw something on the canvas
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }
</script>

This example will fill the entire canvas with a solid color once the page has loaded. You can also use other canvas methods to draw shapes, lines, and text on the canvas.

It's also possible that the problem is due to the css stylings on the canvas element or the parent container. Check that the parent container has the correct dimensions and that the canvas has no css stylings that would affect its dimensions.