Клетчатый фон с помощью canvas

Question

Пытался сделать страницу, которая была бы в чёрно-оранжевых квадратиках, с помощью <canvas>.

Получилось заполнить только часть:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Kosovan's Personal Site</title>
  <canvas id='example'>Обновите браузер</canvas>
  <script>
    var example = document.getElementById("example"),
      ctx = example.getContext('2d');
    example.width = 1920;
    example.height = 1080;
    ctx.fillRect(0, 0, 1920, 1080);
    for (i = 0; i < 8; i += 2)
      for (j = 0; j < 8; j += 2) {
        ctx.clearRect(20 + i * 32, 20 + j * 32, 32, 32);
        ctx.clearRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32);
      }
  </script>
</head>

<body>

</body>

</html>

Что нужно исправить в коде, чтобы весь экран был в чёрно-оранжевых квадратиках?

Answer 1

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Kosovan's Personal Site</title>
  <canvas id='example' style="background:#FFA500">Обновите браузер</canvas>
  <script>
    var example = document.getElementById("example"),
      ctx = example.getContext('2d');
    example.width = 1920;
    example.height = 1080;
    ctx.fillRect(0, 0, 1920, 1080);
    for (i = 0; 20 + i * 32 < example.width; i += 2)
      for (j = 0; 20 + j * 32 < example.width; j += 2) {
        ctx.clearRect(20 + i * 32, 20 + j * 32, 32, 32);
        ctx.clearRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32);
      }
  </script>
</head>

<body>

</body>

</html>

Answer 2

Можно использовать pattern SVG
При этом экран будет заполнен полностью и размер клеток будет адаптивным в зависимости от размера окна браузера

body {
margin:0;
padding:0;
}
 .container {
 width:100vw;
 height:auto;
 }

<div class="container">
<svg version="1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 200 200" preserveAspectRatio='none' >
 <defs>
        <pattern id="outerPattern"
             x="0" y="0" width="20" height="20"
             patternUnits="userSpaceOnUse">
               <rect x="0" y="0" width="10" height="10" fill='orange'/>
                <rect x="10" y="0" width="10" height="10" fill='black'/>
                 <rect x="0" y="10" width="10" height="10" fill='black'/>
                  <rect x="10" y="10" width="10" height="10" fill='orange'/>
        </pattern> 
</defs>
 <rect x="0" y="0" width="100%" height="100%" style="fill: url(#outerPattern); stroke: #000000;"/>
</svg>
</div>

Более интересное применение паттерна для создания кубических форм фона

body, html {
  height: 100%;
}

.left-shade {
  fill: orange;
}

.right-shade {
  fill: lighten;
}

<svg width="100%" height="100%">
   
   <!-- Определение патерна -->
   <pattern id="pattern-cubes" x="0" y="126" patternUnits="userSpaceOnUse" width="126" height="200" viewBox="0 0 10 16"> 
     
      <g id="cube">
       <!-- Мы применим `fill` в CSS для гибкости -->
       <path class="left-shade" d="M0 0l5 3v5l-5 -3z" />
       <path class="right-shade" d="M10 0l-5 3v5l5 -3" />
     </g>
    
     <!-- Применяем для кубических форм -->
     <use x="5" y="8" xlink:href="#cube" />
     <use x="-5" y="8" xlink:href="#cube" />
   
   </pattern>
   
   <!--  canvas для нашего pattern -->
   <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-cubes)" />
  
</svg>

БЛОГ НА HUSL

Клетчатый фон с помощью canvas

Ответы (2 шт):