const Cup = () => {

cupDrawer.drawCell(
context,
item,
maxVolume,
isBestPrice,
yPosition,
realCellHeight,
canvasSize.width,
dpiScale,
darkMode
);
cupDrawer.drawFill(
context,
item,
maxVolume,
yPosition,
realCellHeight,
canvasSize.width,
dpiScale,
darkMode
);

export default Cup;


const cupDrawer = {
clear: (ctx: CanvasRenderingContext2D, size: CanvasSize) => {
ctx.clearRect(0, 0, size.width, size.height);
},
drawCell: (
ctx: CanvasRenderingContext2D,
cupItem: CupItem,
maxVolume: number,
isBestPrice: boolean,
yPosition: number,
cellHeight: number,
fullWidth: number,
dpiScale: number,
darkMode: boolean,
) => {
ctx.beginPath();
ctx.strokeStyle = cupOptions(darkMode).border.color;
ctx.lineWidth = cupOptions(darkMode).border.width;
ctx.fillStyle = cupTools.getCellBackground(cupItem.side, isBestPrice, darkMode);
// @ts-ignore
ctx.roundRect(
0,
yPosition,
cupTools.getCellWidth(fullWidth, cupItem.quantity, maxVolume, isBestPrice),
cellHeight,
cupOptions(darkMode).border.radius * dpiScale,
);
ctx.fill();
ctx.stroke();
},
drawFill: (
ctx: CanvasRenderingContext2D,
cupItem: CupItem,
maxVolume: number,
yPosition: number,
cellHeight: number,
fullWidth: number,
dpiScale: number,
darkMode: boolean,
) => {
ctx.beginPath();
ctx.strokeStyle = “#ffffff00”;
ctx.lineWidth = cupOptions().border.width;
ctx.fillStyle = cupItem.side === “Buy”
? cupOptions(darkMode).bestBuy.fillColor
: cupOptions(darkMode).bestSell.fillColor;
drawRoundedRect(
ctx,
0,
yPosition,
cupTools.getCellWidth(fullWidth, cupItem.quantity, maxVolume, false),
cellHeight,
cupOptions().border.radius * dpiScale,
);
ctx.fill();
ctx.stroke();
},

};

export default cupDrawer;


const cupOptions = (darkMode?: boolean) => ({
sell: {
backgroundColor: darkMode ? “#4A0B09” : “#F3C9CE”,
priceColor: darkMode ? “#fff” : “#B41C18”,
quantityColor: darkMode ? “#CA1612” : “#191919”,
},
bestSell: {
backgroundColor: darkMode ? “#4A0B09” : “#d0706d”,
fillColor: darkMode ? “#CA1612” : “#a5120e”,
priceColor: “#FFFFFF”,
quantityColor: “#FFFFFF”,
},
buy: {
backgroundColor: darkMode ? “#0f3b2b” : “#CAD7CD”,
priceColor: darkMode ? “#fff” : “#006943”,
quantityColor: darkMode ? “#00923A” : “#191919”,
},
bestBuy: {
backgroundColor: darkMode ? “#006943” : “#4d967b”,
fillColor: darkMode ? “#00923A” : “#005737”,
priceColor: “#FFFFFF”,
quantityColor: “#FFFFFF”,
},
font: {
family: “Mont”,
sizePx: 11,
weight: 400,
},
border: {
width: 1,
color: darkMode ? “#191919” : “#ffffff”,
radius: 6,
},
cell: {
paddingX: 4,
defaultHeight: 16,
},
});

export const drawRoundedRect = (
ctx: CanvasRenderingContext2D,
x: number,
y: number,
width: number,
height: number,
radius: number,
): void => {
ctx.beginPath();
ctx.moveTo(x + radius, y + 1);
ctx.lineTo(x + width - radius, y + 1);
ctx.lineTo(x + width - radius, y + height - 1);
ctx.lineTo(x + radius, y + height - 1);
ctx.arcTo(x, y + height - 1, x, y + height - radius - 1, radius);
ctx.lineTo(x, y + radius + 1);
ctx.arcTo(x, y + 1, x + radius, y + 1, radius);
ctx.closePath();
};
нужно вместо drawRoundedRect отрисовать прямоугольник и потом скруглить углы цветом светлой/темной темы.
думаю нужно путь только построить немного иначе и в два патча (beginPath / closePath)

Первым слоем рисуется обычный прямоугольник со скруглением.
Вторым слоем прямоугольник без скругления.
Третьим слоем рисуются скругления (розовые на скрине) белого цвета для светлой темы и темного для темной.