jquery 画心形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Draw Heart</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <canvas id="heartCanvas" width="400" height="400"></canvas>
    <script>
        $(document).ready(function() {
            const canvas = document.getElementById('heartCanvas');
            const ctx = canvas.getContext('2d');
            const width = canvas.width;
            const height = canvas.height;
            const size = 150;
            const x = (width - size) / 2;
            const y = (height - size) / 2;

            function drawHeart() {
                ctx.beginPath();
                ctx.moveTo(x + size / 2, y);
                ctx.bezierCurveTo(x + size / 2, y, x, y + size / 4, x, y + size / 2);
                ctx.bezierCurveTo(x, y + size, x + size / 2, height, x + size, y + size / 2);
                ctx.bezierCurveTo(x + size, y + size / 4, x + size / 2, y, x + size / 2, y);
                ctx.closePath();
                ctx.fillStyle = 'red';
                ctx.fill();
            }

            drawHeart();
        });
    </script>
</body>
</html>