Untitled

<!DOCTYPE html>
<html>
<head>
	<title>Flower Shape</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas" width="400" height="400"></canvas>

	<script>
		// Get canvas element
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");

		// Draw flower shape
		ctx.beginPath();
		ctx.moveTo(200, 50);
		ctx.bezierCurveTo(200, 75, 175, 75, 175, 100);
		ctx.bezierCurveTo(175, 125, 200, 125, 200, 150);
		ctx.bezierCurveTo(200, 175, 225, 175, 225, 150);
		ctx.bezierCurveTo(225, 125, 200, 125, 200, 100);
		ctx.bezierCurveTo(200, 75, 225, 75, 225, 50);
		ctx.closePath();
		ctx.fillStyle = "pink";
		ctx.fill();
	</script>
</body>
</html>
Editor is loading...