CANVAS - линия шириной 100%

Question

Я хотел бы нарисовать линию, используя CANVAS со 100% шириной, проходящей через весь экран, аналогично CSS на «фоновом изображении» тела, как показано в следующем примере:

Пример:

Сделано с CSS

body {
  background-image: url(horizontal-line.png);
  background-repeat: repeat-x;
  background-position: 0px 10%;
}

сделано с CANVAS

???

Как я могу решитьЭто?Спасибо

Answer 1

Canvas line

Используется JavaScript для определения ширины экрана.document.documentElement.clientWidth
Затем использовал это, чтобы установить размер элемента canvas.canvas.width = screenWidth;
Затем нарисуйте прямоугольник шириной 2 пикселя высотой и его шириной, равной screenWidth.
ctx.fillRect(0, 10, screenWidth, 2)
Для чего нужна 10?В этом примере я установил холст на 20 высот.Итак, середина холста - 10.

document.addEventListener("DOMContentLoaded", function() {
  draw();
});

function draw() {
  var canvas = document.getElementById('demo');
  //Set the canvas to viewport size
  var screenWidth = document.documentElement.clientWidth;
  canvas.width = screenWidth;
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillStyle = 'rgb(255, 100, 0)';
    ctx.fillRect(0, 10, screenWidth, 2);

  } else {
    convas.addChild("No canvas here");
  }
}

body {
  margin: 0;
}


/*to make the canvas visible*/

#demo {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

<p>Canvas</p>
<canvas id="demo" width="" height="20"></canvas>

Answer 2

Обновленная демоверсия : https://jsfiddle.net/mulperi/xnob50yd/1/ Полное окно размером с холст и 100% обводка по центру экрана

Вот части css и js:

<style>
  canvas {
    padding: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
</style>
<canvas id="canvas"></canvas>
<script>
    const c = document.getElementById("canvas");
    const ctx = c.getContext("2d");

    c.width = window.innerWidth;
    c.height = window.innerHeight;

    ctx.fillStyle = "red";
    ctx.fillRect(0, window.innerHeight / 2, window.innerWidth, 10);
    ctx.fill();

    window.onresize = function() {
      ctx.width = window.innerWidth;
      ctx.height = window.innerHeight;
    }
</script>

С window.onresize вы гарантируете, что canvas изменяет размер динамически с окном браузера.