JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<button id="quad">Use Quadratic curve</button>
<button id="cubic">Use Cubic Bezier curve</button>
<br>
<br>
<canvas id="canvas" width=150 height=225></canvas>

CSS

body {
    background-color: ivory;
    padding:20px;
}
#canvas {
    border:1px solid red;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 8;
ctx.lineCap = "round";


function baseR() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.moveTo(30, 200);
    ctx.lineTo(30, 50);
    ctx.lineTo(65, 50);
    ctx.moveTo(30, 120);
    ctx.lineTo(65, 120);
    ctx.lineTo(100, 200);
    ctx.strokeStyle = "black";
    ctx.stroke()
}

function quadR() {
    ctx.beginPath();
    ctx.moveTo(65, 50);
    ctx.quadraticCurveTo(130, 85, 65, 120);
    ctx.strokeStyle = "red";
    ctx.stroke();
}

function cubicR() {
    ctx.beginPath();
    ctx.moveTo(65, 50);
    ctx.bezierCurveTo(120, 50, 120, 120, 65, 120);
    ctx.strokeStyle = "red";
    ctx.stroke();
}

$("#quad").click(function () {
    baseR();
    quadR();
    //cubicR();
});

$("#cubic").click(function () {
    baseR();
    cubicR();
});