<canvas id="myCanvas" width="500" height="300"></canvas>

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Начинаем новый путь
ctx.beginPath();

// Перемещаем "курсор" в точку (20, 20)
ctx.moveTo(20, 20);

// Рисуем прямую линию до точки (100, 20)
ctx.lineTo(100, 20);

// Добавляем дугу, соединяющую текущую линию и предыдущую, с радиусом 30
ctx.arcTo(150, 20, 150, 70, 30);

// Рисуем прямую линию до точки (150, 120)
ctx.lineTo(150, 120);

// Закрываем путь
ctx.closePath();

// Рисуем контур пути
ctx.strokeStyle = 'blue'; // Цвет контура
ctx.lineWidth = 2; // Толщина линии
ctx.stroke();