vue画布加载问题

Question

在vue中加了个画布出现四周有些空白。然后给画布加了个样式。然后浏览器右边出现空白。请问下该怎么处理。vue小白

mounted: function() {

    let loading = document.getElementById('loading')
    console.log(loading)
    if (loading != null) {
        document.body.removeChild(loading)
        document.body.style.background = '#fff'
    }
    var canvas = document.getElementById('canvas')
    var context = canvas.getContext('2d')
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    var x = window.innerWidth
    var y = window.innerHeight
    console.log(x)
    console.log(y)
    function Circle() {
        this.x = Math.random() * canvas.width
        this.y = canvas.height
        this.r = Math.random() * 10
        //绘制圆形
        this.paint = function() {
            context.beginPath()
            context.arc(this.x, this.y, this.r, 0, Math.PI * 2)
            context.fillStyle = 'white'
            context.globalAlpha = 0.5
            context.fill()
        }
        //控制圆形移动
        this.step = function() {
            this.y--
        }
    }
    var circles = []
    function createCircles() {
        var circle = new Circle()
        circles[circles.length] = circle
    }
    function paintCircles() {
        for (var i = 0; i < circles.length; i++) {
            circles[i].paint()
        }
    }
    function stepCircles() {
        for (var i = 0; i < circles.length; i++) {
            circles[i].step()
        }
    }
    var myimg = new Image()
    myimg.src = require('../assets/MainBg.jpg')
    var timer = ''
    setInterval(function() {
        context.drawImage(myimg, 0, 0)
        timer++
        if (timer % 20 == 0) {
            createCircles()
        }
        paintCircles()
        stepCircles()
    }, 10)
}

canvas {

width: 100%;
height: 100%;
position: fixed;

}