Unwanted border around canvas

Question

Im writing text on a canvas and drawing a line. Somehow, I end up with an unwanted border around my canvas:

First I write the text in top right corner and call context.save() , then i draw the line and call context.stroke() .

Code:

$(document).ready(function() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    context.beginPath();
    context.rect(0, 0, canvas.width, canvas.height);
    context.fillStyle = 'black';
    context.fill();

    paintName(context, canvas);
    drawLine(context);
});



function paintName(context, canvas) {

    context.textAlign = "left";
    context.font = "16pt Arial";
    context.fillStyle = 'red';
    context.fillText('G5', context.canvas.width - 35, 18);
    context.strokeStyle = 'red';

  context.save();
}

function drawLine(context){
    var gatingCoords = [[30, 120], [50, 300]];
    var nextX, nextY, pointX, pointy;

    context.lineWidth = 4;

    for (var i = 0; i < gatingCoords.length; i++) {

        pointX = gatingCoords[i][0];
        pointY = gatingCoords[i][1];


        if (i === gatingCoords.length - 1) {
            nextX = gatingCoords[0][0];
            nextY = gatingCoords[0][1];
        } else {
            nextX = gatingCoords[i + 1][0];
            nextXY = gatingCoords[i + 1][1];
        }

        context.moveTo(pointX, pointY);
        context.lineTo(nextX, nextY);
    }

    context.stroke();
}

And fiddle is here . How is this happening?

Answer 1

The issue was I wasnt using context.beginPath(); before moveTo() ie

    context.beginPath();
    context.moveTo(pointX, pointY);
    context.lineTo(nextX, nextY);
    context.stroke();

Answer 2

Hope this will help you.

In drawLine function, add the line context.beginPath();

https://www.w3schools.com/tags/canvas_beginpath.asp

Answer 3

The border comes from context.rect(0, 0, canvas.width, canvas.height). If you add another context.beginPath() right before paintName(context, canvas), then the border goes away.