将div放在画布上

Question

所以我有一些看起来像这样的东西

这是html

<div class="control-container">
<div class="gif-control-container">
   <canvas class="gif-fill-animation"/>
   <div class="make-gif-container gif-control">
      <div class="make-gif">
   </div>
</div>
</div>

这是我的css

.webcam-container {
    position: relative;

    .gif-control, .photo-icon-background-circle {
        width: 60px;
        height: 61px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        background: #3275a6;
        padding-left: 10px;
        margin: 0 auto;
        margin-top: 50px;
    }

    .photo-control-container, .gif-control-container {
/*      width: 72px;
        height: 73px;*/
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        margin: 0 auto;
        background: #f5f6f7;
        padding-top: 5px;
        z-index: 10;
        position: absolute;
        left: 40%;
        bottom: -10%;
    }

    .gif-fill-animation {
        float: left;

    }

我想要它，以便蓝色圆圈填充黑色圆圈的内部，白色圆圈比黑色圆圈略大。

使用画布在此函数上使用setInterval绘制黑色圆圈 -

drawCircleAnimation: function(){
            var context =  this.$el.find(".gif-fill-animation")[0].getContext('2d');
            context.beginPath();
            var canvas = this.$el.find(".gif-fill-animation")[0];
            var startAngle = this.currentStartAngle * Math.PI;
            this.startAngle = startAngle;
            var endAngle = this.currentEndAngle* Math.PI;
            this.currentStartAngle = this.currentEndAngle - 0.01;
            this.currentEndAngle = this.currentEndAngle + 0.01;

            var currentColor = 'black';
            var radius = 60;
            var counterClockwise = false;
            var x = canvas.width/2;
            var y = canvas.height/2;
            context.arc(x,y,radius, startAngle,endAngle, counterClockwise);
            context.lineWidth = 15;
            context.strokeStyle = currentColor;
            context.stroke();
        },

我如何实现我的目标？