Как адаптивно сверстать данный блок?
Элементарно - с помощью псевдоэлементов. Полукруг - это бордер половины блока с border-radius: 50%, ну а линия - это линия.  Дальше с помощью медиазапросов корректировать под нужные разрешения.
может, через canvas?
расположить пять кружочков легко. Нарисовать горизонтальные линии тоже легко. Возможно, возникнут трудности с кривыми