I've been scouring the internet for solutions to this problem, but I just can't seem to get it right when trying to implement them.
Everything seems to be functioning perfectly, except for that irritating white border that surrounds the canvas. Am I missing something?
Below is the code snippet in question:
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>