jsCanvasDrill

<!DOCTYPE html>
<html lang="en" id="html">
<head>
    <meta charset="UTF-8">
    <title>CANVAS</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 cX = canvas.width / 2;
            //let cY = canvas.height / 2;

            //let radius = 200;

            //let degreeB = 45;

            //let radiansB = (Math.PI / 180) * degreeB;

            //let degreeE = 90 + 45;

            //let radiansE = (Math.PI / 180) * degreeE;

            //ctx.arc(cX, cY, radius, radiansB, radiansE);

            //ctx.lineWidth = 2;
            //ctx.strokeStyle = 'red';
            //ctx.fillStyle = 'blue';
            //ctx.stroke();
            ////ctx.fill();

            //drawQuadraticCurve(ctx, 100, 100, 300, 300, 400, 30);

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

            ctx.translate(canvas.width / 2, canvas.height / 2);
            ctx.rotate(- Math.PI / 2);

            ctx.moveTo(0, 0);
            ctx.lineTo(-200, 200);

            ctx.lineWidth = 2;
            ctx.strokeStyle = 'red';
            ctx.fillStyle = 'red';
            ctx.stroke();

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