Skip to main content

screen

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/xnew@3.0.x/dist/xnew.js"></script>
</head>

<body>
  <div id="main" style="width: 100%; height: 100%;"></div>
  <script>
    xnew('#main', (self) => {
      xnew.nest({ style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } });

      xnew(Block, 'contain');
      xnew(Block, 'cover');
      xnew(Block, 'fill');
    });

    function Block(self, fit) {
      xnew.nest({ style: { margin: '8px auto' } });
      xnew({ tagName: 'p' }, `screen fit: ${fit}`);

      xnew.nest({ style: { width: '180px', height: '180px', border: '1px solid #A0A' } });
      const screen = xnew(xnew.Screen, { width: 400, height: 200, fit });
      
      const size = 80;
      const context = screen.canvas.getContext('2d');
      const [cx, cy] = [screen.canvas.width / 2, screen.canvas.height / 2];

      context.fillStyle = 'rgb(0,0,0)';
      context.fillRect(0, 0, screen.canvas.width, screen.canvas.height);
      context.fillStyle = 'rgb(200,0,100)';
      context.fillRect(cx - 0.6 * cx - size / 2, cy - size / 2, size, size);
      context.fillStyle = 'rgb(100,200,0)';
      context.fillRect(cx + 0.0 * cx - size / 2, cy - size / 2, size, size);
      context.fillStyle = 'rgb(0,100,200)';
      context.fillRect(cx + 0.6 * cx - size / 2, cy - size / 2, size, size);
    }
  </script>
</body>

</html>