Shape not rendering on HTML 5 canvas when using non-hardcoded parameters - html

Question

I'm trying to create a basic HTML 5 game using typescript but I have run into trouble with rendering a circle of a size that is non hard-coded.
My code so far:
Circle.ts
import { IDrawable } from './../Interfaces/IDrawable';
import {BaseShape} from "./BaseShape";
export class Circle extends BaseShape implements IDrawable{
private _radius : number;
public get radius(){
return this._radius;
}
public set radius(val : number){
this._radius = val;
}
constructor(context : CanvasRenderingContext2D,radius : number, x : number, y : number, color : string = "red", lineWidth : number = 2) {
super(context , x, y, color, lineWidth);
}
public draw = () : void => {
this.context.save();
this.context.beginPath();
this.context.strokeStyle = this.color;
this.context.lineWidth = this.lineWidth;
this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
this.context.stroke();
this.context.restore();
}
}
Game.ts
import { Circle } from './Shapes/Circle';
export default class Game{
private circle : Circle;
constructor(private ctx : CanvasRenderingContext2D ){
this.circle = new Circle(ctx, 200, 300, 50, "blue", 5);
}
public Start() : void{
requestAnimationFrame(() => this.Start());
this.ctx.fillStyle = "black";
this.ctx.fillRect(0, 0, 1280, 720);
this.circle.draw();
}
}
The background renders fine but the circle won't render at all unless I change the line:
this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
and hard-code the parameters.
Not sure what the problem is, tried both using an arrow function for draw() and using a normal method, also tried supplying the context as a method parameter for draw() with the same result.

Answer 1

The problem is that you are passing wrong argument to constructor of Circle. Se parameters of constructor and values you pass.
context: CanvasRenderingContext2D ctx
radius: number 200
x: number 300
y: number 50
color: string "blue"
lineWidth: number 5
I think you have switched the order of radius and coordinates parameter.