How do I append a circle into my <canvas> tag using JavaScript?

Can anyone please tell me how to append an image/circle into my <canvas> tag using this script?

<script>
$(document).ready(function() {

    $('#pink-circle-button').click(function() {
        $('#currentCircle')开发者_高级运维.css({
            'border': '2px solid rgb(255, 0, 255)', 
            'background-color':'',
            'position': 'fixed',
            'display': 'block',
            'top': '97px', 
            'left': '372px',
            'width': '93px', 
            'height': '90px', 
            'border-radius': '76.5px 76.5px 76.5px 76.5px '
        });

        $( "#currentCircle" ).resizable();
        $("#currentCircle").append();  

    });
});
</script>

It looks like you have some sort of HTML element that you are using CSS borders to render like a circle, in which case:

You can't.

A canvas is a bitmap upon which you can draw. It cannot contain elements (except as a fallback for when canvas is not supported and/or a shadow DOM for non-visual interaction with the element (I'm not sure what the state of the spec and browser support is like for that)).

If you want a circle, then use the canvas API to draw one, and don't use that script.