html canvas 上加按钮,javascript - Can I put an HTML button inside the canvas? - Stack Overflow

One way to add button dynamically on the top of the canvas is following the next two points:

1. Making zIndex of the button higher than canvas

2. Position the button using absolute positioning with desired top and left value

HTML:

CSS:

canvas {

border: 1px dotted black;

background: navy;

}

JavaScript:

var $testButton = $('').attr({

type: 'button',

name: 'btn1',

value: 'TestButton',

id: 'testButton',

style: 'position:absolute; top:50px;left:100px; zindex:2'

});

$('body').append($testButton);

$(document).on("click", "#testButton", function() {

alert('button clicked');

});