Working with Canvas - No Edge

Question

I have a canvas on my page and would like to remove the edge.... only I’m not getting... which property works with the edge?

           function desenhaBase(canvas, context, x1, y1, x2, y2){
            context.fillStyle = "white";
            context.beginPath();
            context.rect(0, 0, canvas.width, canvas.height);
            context.fill();

            var message = "x";
            context.font = '9pt Arial';
            context.fillStyle = 'black';
            context.fillText(message, 293, 148);
            context.fillRect(0, 149, 300, 1);

            var message = "y";
            context.font = '9pt Arial';
            context.fillStyle = 'black';
            context.fillText(message, 3, 9);
            context.fillRect(1, 0, 1, 150);

            context.fillRect(150, 0, 1, 150);
            context.fillRect(0, 149, 300, 1);

            context.moveTo(x1,y1);
            context.lineTo(x2,y2);
            context.strokeStyle = '#ff0000';
            context.stroke();
        }

I want to build a Cartesian plan..

Answer 1

The edge is drawn by the function rect, then you just use the function fillRect in the first part of the code.

In addition, I adjusted his example a little to generate a Cartesian plan centered in the middle. See how it turned out:

function desenhaBase(canvas, context, x1, y1, x2, y2) {
    context.fillStyle = "white";
    context.beginPath();
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.fill();
    
    //center
    var xm = (x1 + x2) / 2, ym = (y1 + y2) / 2;
    
    //default formatting
    context.lineWidth = 1;
    context.fillStyle = 'black';
    context.strokeStyle = 'black';
    context.font = '9pt Arial';
    
    //axis labels
    var message = "x";
    context.fillText(message, x2 - 10, ym + 10);
    var message = "y";
    context.fillText(message, xm - 10, y1 + 10);

    //y axis
    context.beginPath();
    context.moveTo(x1, ym);
    context.lineTo(x2, ym);
    context.stroke();
    
    //x axis
    context.beginPath();
    context.moveTo(xm, y2);
    context.lineTo(xm, y1);
    context.stroke();
    
    //f(x) = y 
    context.beginPath();
    context.moveTo(x1, y2);
    context.lineTo(x2, y1);
    context.strokeStyle = '#ff0000';
    context.stroke();
}
var c = document.querySelector('canvas');
var ctx=c.getContext("2d");
desenhaBase(c, ctx, 0, 0, 300, 300);

body {
    background: #ddd;
}

<canvas width="300" height="300"></canvas>