HTMLでフルスクリーンキャンバスの周囲に厄介な空白があります

私はこの問題について数多くの解決策を探しましたが、実装に関しては何の幸運もありませんでした。HTMLでフルスクリーンキャンバスの周囲に厄介な空白があります

すべてうまくいっていますが、キャンバスの周りにこの邪魔な白い枠線があります。私は間違って何をしていますか？ここで

私のコードです：あなたは迷惑な白い境界線があると言った

var canvas = document.getElementById("canvas"); 
 
var x = window.innerWidth - 20; 
 
var y = window.innerHeight - 20; 
 

 
function resizeCanvas() { 
 
    canvas.style.width = x.toString() + 'px'; 
 
    canvas.style.height = y.toString() + 'px'; 
 
} 
 

 
var granimInstance = new Granim({ 
 
    element: '#canvas', 
 
    name: 'radial-gradient', 
 
    direction: 'radial', 
 
    opacity: [1, 1], 
 
    isPausedWhenNotInView: true, 
 
    states : { 
 
     "default-state": { 
 
      gradients: [ 
 
       ['#ffb347', '#ffcc33'], 
 
       ['#83a4d4', '#b6fbff'], 
 
       ['#9D50BB', '#6E48AA'] 
 
      ] 
 
     } 
 
    } 
 
}); 
 

 
window.onresize = resizeCanvas; 
 

 
resizeCanvas();

.canvas { 
 
    position: absolute; 
 
    display: block; 
 
} 
 

 
html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/granim/1.0.6/granim.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Announcements</title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 
    <link rel="stylesheet" href="assets/css/club_meetingv2.css"> 
 
</head> 
 
<body> 
 
    <canvas id="canvas"></canvas> 
 

 
<script type="text/javascript" src="assets/js/club_meetingv2.js"></script> 
 
</body> 
 
</html>

出典

2017-11-02 RaspberryPiDudePlusWebDevToo

問題の答えを見つけたら、自分の質問に答える回答を追加し、「受け入れ」とマークすることをお勧めします。 –