What happens is that I am implementing an animation to simulate the effect of water in a circle, for this I am using a Js that I found online called "waterwave", but I can not change the color of the black background, try to several ways and the truth, none works for me.
(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>