Lo que sucede es que estoy implementando una animación para simular el efecto de agua en un circulo, para ello estoy usando un Js que encontré en linea llamado "waterwave", pero no logro cambiar el color del fondo negro, ya intente de varias formas y la verdad, ninguna me funciona.
(function($) {
$.fn.waterwave = function(options) {
// DEFAULT OPTIONS
var settings = $.extend({
parent: '',
color: '#fcd600',
direction: 'up',
background: ''
}, options);
var waterwave = this;
waterwave.init = function() {
var TAU = Math.PI * 1;
var density = 2;
var speed = 1;
var res = 0.005; // percentage of screen per x segment
var outerScale = 0.05 / density;
var inc = 0;
var c = waterwave[0];
var ctx = c.getContext('2d');
// var grad = ctx.createLinearGradient(252, 214, 0, c.height * 4);
function onResize() {
if (options.direction == 'down') {
waterwave.attr({
width: "100px"
});
} else {
waterwave.attr({
width: "100px",
height: "100px"
});
}
}
onResize();
setTimeout(function() {
loop();
}, 500);
$(window).resize(onResize);
function loop() {
inc -= speed;
drawWave(options.color);
requestAnimationFrame(loop);
}
function drawBG(patternCanvas, w, h) {
var space = ctx.createPattern(patternCanvas, 'repeat');
ctx.fillStyle = space;
ctx.fillRect(0, 0, w, h);
}
function drawWave(color) {
var w = c.offsetWidth;
var h = c.offsetHeight;
var cx = w * 0.5;
var cy = h * 0.5;
ctx.clearRect(0, 0, w, h);
var segmentWidth = w * res;
if (options.background != '') {
var image = new Image();
image.src = options.background;
image.onload = function() {
// create an off-screen canvas
var patt = document.createElement('canvas');
// set the resized width and height
patt.width = w;
patt.height = h;
patt.getContext('2d').drawImage(this, 0, -1 * (h / 4), patt.width, patt.height);
// pass the resized canvas to your createPattern
drawBG(patt, w, h);
};
} else {
ctx.fillStyle = color;
}
ctx.beginPath();
ctx.moveTo(0, cy);
for (var i = 0, endi = 1 / res; i <= endi; i++) {
var _y = cy + Math.sin((i + inc) * TAU * res * density) * cy * Math.sin(i * TAU * res * density * outerScale);
var _x = i * segmentWidth;
ctx.lineTo(_x, _y);
}
if (options.direction == 'down') {
ctx.lineTo(w, 0);
ctx.lineTo(0, 0);
} else {
ctx.lineTo(w, h);
ctx.lineTo(0, h);
}
ctx.closePath();
ctx.fill();
}
};
waterwave.init();
return waterwave;
};
}(jQuery));
canvas {
background-color: transparent;
border-radius: 50%;
border: 1px solid #979797;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
var box = $(".waterwave-canvas").waterwave({});
});
</script>
<div id="canvas-cont">
<canvas class="waterwave-canvas"></canvas>
</div>