jsCanvasBezierQuadraticCurves

<!DOCTYPE html>
<html lang="en" id="html">
<head>
    <meta charset="UTF-8">
    <title>GalleryClass</title>
    <style>
        html,
        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-content: center;
            align-items: center;
            margin-top: 30px;
            position: relative;
        }
        canvas {
            margin: 10px;
            border: 1px solid black;
            background-image: url('grid.png');
        }
    </style>
</head>
<body>
    <div id="container" class="container">
        <canvas id="canvas" width="650" height="450">Please update your browser!</canvas>
    </div>
    <script>
        'use strict'

        function drawQuadraticCurve(ctx, bX, bY, eX, eY, cpX, cpY) {
            ctx.beginPath();
            ctx.strokeStyle = 'blue';
            ctx.moveTo(bX, bY);
            ctx.lineTo(cpX, cpY);
            ctx.lineTo(eX, eY);
            ctx.stroke();

            ctx.beginPath();
            ctx.strokeStyle = 'red';
            ctx.lineWidth = 2;
            ctx.moveTo(bX, bY);
            ctx.quadraticCurveTo(cpX, cpY, eX, eY);
            ctx.stroke();
        }

        function drawBezierCurve(ctx, bX, bY, eX, eY, cpAX, cpAY, cpBX, cpBY) {
            ctx.beginPath();
            ctx.strokeStyle = 'blue';
            ctx.moveTo(bX, bY);
            ctx.lineTo(cpAX, cpAY);
            ctx.moveTo(cpBX, cpBY)
            ctx.lineTo(eX, eY);
            ctx.stroke();

            ctx.beginPath();
            ctx.strokeStyle = 'red';
            ctx.lineWidth = 2;
            ctx.moveTo(bX, bY);
            ctx.bezierCurveTo(cpAX, cpAY, cpBX, cpBY, eX, eY);
            ctx.stroke();
        }


        {
            const canvas = document.getElementById('canvas');
            canvas.width = 650;
            canvas.height = 450;
            const ctx = canvas.getContext('2d');

            let cpAX = 200;
            let cpAY = 50;

            let cpBX = 350;
            let cpBY = 200;

            let bX = 100;
            let bY = 100;

            let eX = 300;
            let eY = 300;

            drawQuadraticCurve(ctx, 100, 100, 300, 300, 350, 50);
            drawBezierCurve(ctx, 100, 100, 300, 300, 200, 50, 350, 200);

        }
    </script>
</body>
</html>