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

문제의 해답을 찾았 으면 자신의 질문에 대답하는 대답을 추가하고 "수락"으로 표시하는 것이 좋습니다. –