Как сделать так, чтобы холст JavaScript покрыл весь экран?

Question

(function() {
  // Creates a new canvas element and appends it as a child
  // to the parent element, and returns the reference to
  // the newly created canvas element


  function createCanvas(parent, width, height) {
    var canvas = {};
    canvas.node = document.createElement('canvas');
    canvas.context = canvas.node.getContext('2d');
    canvas.node.width = width || 100;
    canvas.node.height = height || 100;
    parent.appendChild(canvas.node);
    return canvas;
  }

  function init(container, width, height, fillColor) {
    var canvas = createCanvas(container, width, height);
    var ctx = canvas.context;
    // define a custom fillCircle method
    ctx.fillCircle = function(x, y, radius, fillColor) {
      this.fillStyle = fillColor;
      this.beginPath();
      this.moveTo(x, y);
      this.arc(x, y, radius, 0, Math.PI * 2, false);
      this.fill();
    };
    ctx.clearTo = function(fillColor) {
      ctx.fillStyle = fillColor;
      ctx.fillRect(0, 0, width, height);
    };
    ctx.clearTo(fillColor || "black");

    // bind mouse events
    canvas.node.onmousemove = function(e) {
      if (!canvas.isDrawing) {
        return;
      }
      var x = e.pageX - this.offsetLeft;
      var y = e.pageY - this.offsetTop;
      var radius = 40; // or whatever
      var fillColor = '#ff0000';
      ctx.globalCompositeOperation = 'destination-out';
      ctx.fillCircle(x, y, radius, fillColor);
    };
    canvas.node.onmousedown = function(e) {
      canvas.isDrawing = false;
    };
    canvas.node.onmouseup = function(e) {
      canvas.isDrawing = true;
    };
  }

  var container = document.getElementById('canvas');
  init(container, 531, 438, 'black');

})();

#canvas {
  /* background:url(); */
  width: 100vw;
  height: 100vh;
  background-color: rgb(224, 255, 226);
}

<div id="canvas"></div>

Я начинаю совершенно новичок в кодировании, я пытаюсь получить JavaScript, чтобы покрыть весь rgb (224 , 255, 226) - цвет мятный. В общем, я хочу все вернуть. Пожалуйста, помогите и заранее благодарим вас за помощь :)

Это код, который я нашел на inte rnet, я попытался найти человека, который сделал это, чтобы спросить их, но он не ответил

Answer 1

Когда вы вызываете init(), вместо передачи значений stati c для ширины и высоты передайте размер окна.

(function() {
  // Creates a new canvas element and appends it as a child
  // to the parent element, and returns the reference to
  // the newly created canvas element


  function createCanvas(parent, width, height) {
    var canvas = {};
    canvas.node = document.createElement('canvas');
    canvas.context = canvas.node.getContext('2d');
    canvas.node.width = width || 100;
    canvas.node.height = height || 100;
    parent.appendChild(canvas.node);
    return canvas;
  }

  function init(container, width, height, fillColor) {
    var canvas = createCanvas(container, width, height);
    var ctx = canvas.context;
    // define a custom fillCircle method
    ctx.fillCircle = function(x, y, radius, fillColor) {
      this.fillStyle = fillColor;
      this.beginPath();
      this.moveTo(x, y);
      this.arc(x, y, radius, 0, Math.PI * 2, false);
      this.fill();
    };
    ctx.clearTo = function(fillColor) {
      ctx.fillStyle = fillColor;
      ctx.fillRect(0, 0, width, height);
    };
    ctx.clearTo(fillColor || "black");

    // bind mouse events
    canvas.node.onmousemove = function(e) {
      if (!canvas.isDrawing) {
        return;
      }
      var x = e.pageX - this.offsetLeft;
      var y = e.pageY - this.offsetTop;
      var radius = 40; // or whatever
      var fillColor = '#ff0000';
      ctx.globalCompositeOperation = 'destination-out';
      ctx.fillCircle(x, y, radius, fillColor);
    };
    canvas.node.onmousedown = function(e) {
      canvas.isDrawing = false;
    };
    canvas.node.onmouseup = function(e) {
      canvas.isDrawing = true;
    };
  }

  var container = document.getElementById('canvas');
  
  // Instead of passing static values for width and height,
  // pass the size of the window.
  init(container, window.innerWidth, window.innerHeight, 'black');

})();

#canvas {
  /* background:url(); */
  width: 100vw;
  height: 100vh;
  background-color: rgb(224, 255, 226);
}

<div id="canvas" height="50" width="50"></div>

Answer 2

Вам необходимо передать window.innerWidth и window.innerHeight в качестве параметров функции инициализации.

(function() {
  // Creates a new canvas element and appends it as a child
  // to the parent element, and returns the reference to
  // the newly created canvas element


  function createCanvas(parent, width, height) {
    var canvas = {};
    canvas.node = document.createElement('canvas');
    canvas.context = canvas.node.getContext('2d');
    canvas.node.width = width || 100;
    canvas.node.height = height || 100;
    parent.appendChild(canvas.node);
    return canvas;
  }

  function init(container, width, height, fillColor) {
    var canvas = createCanvas(container, width, height);
    var ctx = canvas.context;
    // define a custom fillCircle method
    ctx.fillCircle = function(x, y, radius, fillColor) {
      this.fillStyle = fillColor;
      this.beginPath();
      this.moveTo(x, y);
      this.arc(x, y, radius, 0, Math.PI * 2, false);
      this.fill();
    };
    ctx.clearTo = function(fillColor) {
      ctx.fillStyle = fillColor;
      ctx.fillRect(0, 0, width, height);
    };
    ctx.clearTo(fillColor || "black");

    // bind mouse events
    canvas.node.onmousemove = function(e) {
      if (!canvas.isDrawing) {
        return;
      }
      var x = e.pageX - this.offsetLeft;
      var y = e.pageY - this.offsetTop;
      var radius = 40; // or whatever
      var fillColor = '#ff0000';
      ctx.globalCompositeOperation = 'destination-out';
      ctx.fillCircle(x, y, radius, fillColor);
    };
    canvas.node.onmousedown = function(e) {
      canvas.isDrawing = false;
    };
    canvas.node.onmouseup = function(e) {
      canvas.isDrawing = true;
    };
  }

  var container = document.getElementById('canvas');
  init(container, window.innerWidth, window.innerHeight, 'black');

})();

<div id="canvas"></div>