CODEWITHSUNDEEP
javascriptcanvashtml5-canvas
CSK
CSK

Reputation: 21

HTML Canvas, how to add a border to the circle that is drawn

I've created a class for my player, a circle, in a a canvas game to be drawn and would like to add a solid border so that I can use RGBA to add some extra styling in my game.

Looking at the MDN articles here: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors

I should be able to use strokeStyle to create a border but it's not giving me the intended result of a white circle with a blue border, just a white circle.

Is it that border isn't a correct variable? or something else I'm missing?

 class Player {
  constructor(x, y, radius, color, border) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.border = border;
  }
  draw() {
    context.beginPath();
    context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    context.fillStyle = this.color;
    context.strokeStyle = this.border;
    context.fill();
  }
}

let newPlayer1 = new Player(canvas.width / 2, canvas.height / 2, 10, "white", "blue");

function init() {
  newPlayer1 = new Player(canvas.width / 2, canvas.height / 2, 10, "white", "blue");
}

Upvotes: 1

Views: 364

Answers (1)

kol
kol

Reputation: 28708

You also need context.stroke(); to draw the stroke (the "border of the circle").

Upvotes: 1

Related Questions