JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

CSS

body {
  margin: 0;
}

JavaScript

var canvas = document.createElement('canvas');
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
canvas.width = window.innerWidth * window.devicePixelRatio;
canvas.height = window.innerHeight * window.devicePixelRatio;

// キャンバスを配置するdiv要素を作成し、bodyに追加
var container = document.createElement('div');
container.style.width = window.innerWidth + 'px';
container.style.height = window.innerHeight + 'px';
container.style.overflow = 'hidden';
container.appendChild(canvas);
document.body.appendChild(container);

// スワイプによるスクロールを禁止させる
document.body.addEventListener('touchstart', function(event) {
  event.preventDefault();
});

const ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, canvas.width, canvas.height);

var radius = Math.min(canvas.width, canvas.height) * 0.4;
ctx.beginPath();
ctx.arc(canvas.width /2, canvas.height / 2, radius, 0, 2 * Math.PI);
ctx.fillStyle = "rgb(0,255,0)";
ctx.fill();