JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<canvas id="field"></canvas>

CSS

*,
*:after,
*:before {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}

/* стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css */
html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

JavaScript

let opCoordDL = {
   cnv: document.getElementById(`field`),
   jsonCooords: [
      { x: 10, y: 10 },
      { x: 20, y: 20 },
      { x: 30, y: 10 },
      { x: 40, y: 20 },
      { x: 50, y: 10 },
   ],
   events: {
      load: () => {

      } 
   },
};

;[`load`,`resize`].forEach(evt => {
   window.addEventListener(evt, () => {
      opCoordDL.cnv.style = {
         ...opCoordDL.cnv.style,
         width: `${window.innerWidth}px`,
         height: `${window.innerHeight}px`,
         border: `2px solid red`,
      };
      console.log(opCoordDL.cnv.style);
   });
});