холст прокручивается слишком далеко

Question

Я использую этот ответ https://stackoverflow.com/a/36233727/1350146, чтобы прокрутить холст в div.Я также скрываю полосу прокрутки.Проблема в том, что кажется, что он прокручивается слишком далеко, в этом случае, если вы прокрутите вниз, вы увидите красный цвет div, в котором находится холст.

Я пробовал возиться с отступами и полями и разными размерами, но нетудачи.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = '#00aa00'
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = '#fff'
ctx.font='12pt A'
ctx.fillText("scroll here to see red from screen div", 30, 50);

.screen {
  background: red;
  height: 100px;
  width: 300px;
  overflow: auto;
  border-radius: 20px;
  
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

<div class="screen">
  <canvas id="myCanvas" width="300" height="120">
  </canvas>
</div>

Как сделать так, чтобы он прокручивался до самого конца холста и не показывал внизу какой-либо контейнерный элемент?

Спасибо!

Answer 1

Используйте отрицательное значение margin-bottom для вашего элемента canvas.Все, что находится между margin-bottom: -5px; и margin-bottom: -105px;, будет работать в этом примере.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = '#00aa00'
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = '#fff'
ctx.font='12pt A'
ctx.fillText("scroll here to see red from screen div", 30, 50);

.screen {
  background: red;
  height: 100px;
  width: 300px;
  overflow: auto;
  border-radius: 20px;
  
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

canvas {
  margin-bottom: -5px;
}

<div class="screen">
  <canvas id="myCanvas" width="300" height="120">
  </canvas>
</div>

Answer 2

Сделать холст элементом block.По умолчанию canvas является встроенным элементом, и он будет вести себя подобно img;таким образом, у вас будет проблема с пробелами из-за вертикального выравнивания ( Изображение внутри div имеет дополнительное пространство под изображением )

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = '#00aa00'
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = '#fff'
ctx.font='12pt A'
ctx.fillText("scroll here to see red from screen div", 30, 50);

.screen {
  background: red;
  height: 100px;
  width: 300px;
  overflow: auto;
  border-radius: 20px;
}
canvas {
 display:block;
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

<div class="screen">
  <canvas id="myCanvas" width="300" height="120">
  </canvas>
</div>