Помогите нарисовать иконку батареи iPhone X через javascript

Я совсем только недавно стал изучать javascript. https://i.imgur.com/l8wVevO.jpg
Хотелось бы нарисовать иконку батареи как на iPhone X для использования темы через твик Lithium Ion.
Получается нарисовать прямоугольник, но не могу понять, как закруглить края. https://supermamon.com/LithiumThemeEditor/

function renderBattery(height, percentage, charging, low, color) {
var canvas = document.createElement(“canvas”),
context = canvas.getContext(“2d”);
var rectWidth = height,
rectHeight = height / 2;
var colorString = color.join();
canvas.width = rectWidth;
canvas.height = rectHeight;
context.fillStyle = “rgba(” + colorString + “,0.5)”;
if(low) context.fillStyle = “rgba(255,0,0,0.5)”;
if(charging) context.fillStyle = “rgba(0,255,0,0.5)”;
context.fillRect(0, 0, rectWidth, rectHeight);
context.fillStyle = “rgb(” + colorString + “)”;
if(low) context.fillStyle = “#F00”;
if(charging) context.fillStyle = “#0F0”;
context.fillRect(0, 0, rectWidth * (percentage / 100), rectHeight);
return canvas.toDataURL(“image/png”);
}

В коде используется api canvas-a. При том 2d (есть ещё другие). Значит тебе для рисования доступны только те методы рисования которые это api предоставляют. Круги на канвасе рисуются так: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc. Ещё кривульки можно рисовать кривыми Безье https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo
Осталось организовать прямые и кривые чтобы они выглядели как скругленные уголки прямоугольника.

1 лайк