Html5 Context('2d') when using fill background , drawImage setting the image rectangle on top right

i have simple html which draws yellow rectangle on top of it i draw image to draw png image with transparency , the problem is that when i do that , the there is some image rectangle on top right which i don't know from where it come .

And here is the code :

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <style>
    body {
        background-color: lightblue;
    }
        html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    div {
        -webkit-user-select: none; /* webkit (safari, chrome) browsers */
        -moz-user-select: none; /* mozilla browsers */
        -khtml-user-select: none; /* webkit (konqueror) browsers */
        -ms-user-select: none; /* IE10+ */
    }

    #gameAreaWrapper {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;

    }
    </style>
    <script>


    var cv;  
    var context;
    var playerImage = "images/char2_sprite.png";
    var playerSprite;

    var debug = function(args) {
        if (console && console.log) {
            console.log(args);
        }
    }; 
    function setUpCanvas()
    {
        document.getElementById('gameAreaWrapper').style.opacity = 1;
        this.cv = document.getElementById('cvs');
        this.cv.width = 600;
        this.cv.height = 600;
        this.context = this.cv.getContext('2d');
        this.context.beginPath();
        this.context.rect(0,0, 600, 600);
        this.context.fillStyle = 'yellow';
        this.context.fill();
        this.context.lineWidth = 7;
        this.context.strokeStyle = 'black';
        this.context.stroke();
    }

    function sprite (options) {
        var that = {},
            frameIndex = 0,
            tickCount = 0,
            ticksPerFrame = options.ticksPerFrame || 0,
            numberOfFrames = options.numberOfFrames || 1;

        that.context = options.context;
        that.width = options.width;
        that.height = options.height;
        that.image = options.image;
        that.update = function () {
            tickCount += 1;
            if (tickCount > ticksPerFrame) {
                tickCount = 0;

                // If the current frame index is in range
                if (frameIndex < numberOfFrames - 1) {  
                    // Go to the next frame
                    frameIndex += 1;
                } else {
                    frameIndex = 0;
                }
            }
        };      
        that.render = function () {
          // Clear the canvas
          that.context.clearRect(0, 0, that.width / numberOfFrames, that.height);
          // Draw the animation
          that.context.drawImage(
            that.image,
            frameIndex * that.width / numberOfFrames,
            0,
            that.width / numberOfFrames,
            that.height,
            300,
            300,
            that.width / numberOfFrames,
            that.height);
        };
        retu that;
    }
    function imageloaded()
    {
        debug("imageloaded:"+playerImage.src);
        playerSprite.update();
        playerSprite.render();
    }
    function loadCharacter()
    {
        // Create sprite sheet
        playerImage = new Image();  
        playerImage.addEventListener("load", imageloaded);
        playerImage.src ="images/char2_sprite.png";
        // Create sprite
        playerSprite = sprite({
            context: this.context,
            width: 80,
            height: 40,
            image: playerImage,
            numberOfFrames: 2,
            ticksPerFrame: 4
        });

    }
    window.onload = function() {
        setUpCanvas(); 
        loadCharacter();
    }
    </script>
</head>
<body>
<div id="gameAreaWrapper">        
        <canvas tabindex="1" id="cvs"  ></canvas>
</div>

</body>
</html>