Try it Yourself: Canvas Curves

Canvas Curves

<!DOCTYPE html>
<html>
<body>

<canvas id="scene" width="300" height="200" style="border:1px solid #ccc;"></canvas>

<script>
const ctx = document.getElementById('scene').getContext('2d');

ctx.beginPath();
ctx.moveTo(30, 120);
ctx.quadraticCurveTo(120, 20, 210, 120);

ctx.strokeStyle = '#0891b2';
ctx.lineWidth = 4;
ctx.stroke();
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<canvas id="scene" width="300" height="200" style="border:1px solid #ccc;"></canvas>

<script>
const ctx = document.getElementById('scene').getContext('2d');

ctx.beginPath();
ctx.moveTo(30, 120);
ctx.quadraticCurveTo(120, 20, 210, 120);

ctx.strokeStyle = '#0891b2';
ctx.lineWidth = 4;
ctx.stroke();
</script>

</body>
</html>