JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<h4>Heart shape drawn with 4 bezier curves</h4>
<canvas id="canvas" width=300 height=300></canvas>

CSS

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

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.lineWidth = 2;


var x = 100;
var y = 100;

drawBezierCurve(x, y, x, y - 30, x - 50, y - 30, x - 50, y, "red");
drawBezierCurve(x - 50, y, x - 50, y + 30, x, y + 35, x, y + 60, "green");
drawBezierCurve(x, y + 60, x, y + 35, x + 50, y + 30, x + 50, y, "blue");
drawBezierCurve(x + 50, y, x + 50, y - 30, x, y - 30, x, y, "gold");

function drawBezierCurve(x0, y0, x1, y1, x2, y2, x3, y3, color) {
    ctx.beginPath();
    ctx.moveTo(x0, y0);
    ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3);
    ctx.strokeStyle = color;
    ctx.stroke()
}