0

Мне нужно, чтобы div находился поверх canvas, и оба они никак не влияли на расположение друг друга, т.е. оба были привязаны к левому верхнему углу экрана, однако div смещает canvas вниз, как если бы CSS не был привязан.

html,
body {
  width: 100%;
  height: 100%;
  position: relative;
}

#canvas {
  position: absolute;
  border: 2px solid black;
}

#orientationWarning {
  position: absolute;
  border: 2px solid red;
}
<body>
  <div id="orientationWarning">
    <h1>Поверните экран горизонтально!</h1>
  </div>
  <canvas id="canvas">123</canvas>
</body>

12
  • скорее всего у вас в другом проблема, так как данный пример работает как и задумано 9 июл 2022 в 20:03
  • задай координаты для left/top
    – Grundy
    9 июл 2022 в 20:05
  • В каком браузере ты пробуешь?
    – Grundy
    9 июл 2022 в 20:06
  • Заменил пример.
    – R1senDev
    9 июл 2022 в 20:09
  • предыдущий пример не отличается от текущего. В каком конкретно браузере у тебя не работает?
    – Grundy
    9 июл 2022 в 20:25

1 ответ 1

-1

Вот ваш пример, все работает: немного js для canvas

Может путь неверный у вас до css?

window.onload = function() {
  var drawingCanvas = document.getElementById('canvas');
  if (drawingCanvas && drawingCanvas.getContext) {
    var context = drawingCanvas.getContext('2d');
    // Рисуем окружность 
    context.strokeStyle = "#000";
    context.fillStyle = "#fc0";
    context.beginPath();
    context.arc(100, 100, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.stroke();
    context.fill();
    // Рисуем левый глаз 
    context.fillStyle = "#fff";
    context.beginPath();
    context.arc(84, 90, 8, 0, Math.PI * 2, true);
    context.closePath();
    context.stroke();
    context.fill();
    // Рисуем правый глаз 
    context.beginPath();
    context.arc(116, 90, 8, 0, Math.PI * 2, true);
    context.closePath();
    context.stroke();
    context.fill();
    // Рисуем рот
    context.beginPath();
    context.moveTo(70, 115);
    context.quadraticCurveTo(100, 130, 130, 115);
    context.quadraticCurveTo(100, 150, 70, 115);
    context.closePath();
    context.stroke();
    context.fill();
  }
}
html,
body {
  width: 100%;
  height: 100%;
  position: relative;
}

#canvas {
  position: absolute;
  border: 1px solid black;
}

#orientationWarning {
  position: absolute;
  border: 1px solid red;
}
<div id="orientationWarning">
  <h1>Поверните экран горизонтально!</h1>
</div>
<canvas id="canvas" width="300" height="300"></canvas>

1
  • Если минус поставили - пишите хоть за какие действия ?! 9 июл 2022 в 20:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.