Почему canvas выходит за рамки блока?

let chart = $('.chart__body').html('<canvas></canvas>');
let canvas = $('.chart__body canvas')[0];

let title = window.getComputedStyle($('.chart__title')[0])
let th = title.height.slice(0,title.height.length-2);

let ctx = canvas.getContext('2d');
canvas.style.width = canvas.offsetWidth +'px';
canvas.style.height = canvas.offsetHeight - th +'px';//здесь вычитаем из общей высоты
let canvasWidth = canvas.width = canvas.offsetWidth * 2;
let canvasHeight = canvas.height = (canvas.offsetHeight * 2)
ctx.save();
ctx.fillStyle = "#2CFA29";
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
ctx.restore();

console.log(canvas.offsetWidth, canvas.offsetHeight);

* {
  box-sizing: border-box;
}
canvas {
  width: 100%;
  height: 100%;
}
.chart {
  width: 100%;
  height: 100px;
  border: 2px solid #000;
  display: flex;
  flex-direction: column;
}
.chart__title {
  height: 22px;
  border-bottom: 2px solid #000;
  display: flex;
  padding: 2px 5px;
}
.chart__body {
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chart">
  <div class="chart__title">Color</div>
  <div class="chart__body"></div>
</div>

const chart = document.querySelector('.chart__body');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

let canvasWidth;
let canvasHeight;

setCanvasSize();
chart.append(canvas);

window.addEventListener('resize', setCanvasSize);

function setCanvasSize() {
  const rect = chart.getBoundingClientRect();
  canvasWidth = canvas.width = rect.width;
  canvasHeight = canvas.height = rect.height;
  fillCanvas();
}

function fillCanvas() {
  ctx.save();
  ctx.fillStyle = "#2CFA29";
  ctx.fillRect(0, 0, canvasWidth, canvasHeight);
  ctx.restore();
}

* {
  box-sizing: border-box;
}

.chart {
  height: 100px;
  border: 2px solid #000;
  display: flex;
  flex-direction: column;
}

.chart__title {
  height: 22%;
  border-bottom: 2px solid #000;
  display: flex;
  padding: 2px 5px;
}

.chart__body {
  height: 78%;
}

canvas {
  width: 100%;
  height: 100%;
}

<div class="chart">
  <div class="chart__title">Color</div>
  <div class="chart__body"></div>
</div>