Reputation: 57

Canvas in a javascript class

I'm trying to add an element into a canvas, everything managed by a class: I made a class that controls the size of the canvas and a second class that should display an element on the same canvas.

class CanvasGame {
  constructor() {
    this.canvas = document.getElementById("game");
    this.ctx = this.canvas.getContext("2d");
    this.width = window.innerWidth;
    this.height = window.innerHeight;
  }
}

class Tanks extends CanvasGame {
  constructor(ctx) {
    super(ctx);
    this.tankWidth = 45;
    this.tankhHeight = 35;
    this.angle = "angle";
    this.power = "power";
    this.colors = ["purple", "red", "yellow", "green"];
    this.startPosXp1 = Math.floor(Math.random() * this.width + 0);
    this.startPosYp1 = Math.floor(Math.random() * this.height + 0);
  }

  colorSelection() {
    return this.colors[0];
  }

  tank1() {
    this.ctx.fillStyle = this.colorSelection();
    this.ctx.fillRect(this.width, this.height, this.startPosXp1, this.startPosYp1);
  }
}

let core = new CanvasGame();
let player1 = new Tanks();

player1.tank1();

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

#game {
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <canvas id="game"></canvas>
  <script src="src/script.js"></script>
</body>

</html>

I actually do not get why it does not display anything. Any ideas?

Upvotes: 2

Answers (3)

Dan Mullin

Reputation: 4415

You've got several issues in your code. You are setting the x/y with the width/height, but you're also not using the correct width and height values.

You need to use the tank's width and height when rendering it.

class CanvasGame {
  constructor() {
    this.canvas = document.getElementById("game");
    this.ctx = this.canvas.getContext("2d");
    this.width = window.innerWidth;
    this.height = window.innerHeight;
  }
}

class Tanks extends CanvasGame {
  constructor(ctx) {
    super(ctx);
    this.tankWidth = 45;
    this.tankHeight = 35;
    this.angle = "angle";
    this.power = "power";
    this.colors = ["purple", "red", "yellow", "green"];
    this.startPosXp1 = Math.floor(Math.random() * this.tankWidth + 0);
    this.startPosYp1 = Math.floor(Math.random() * this.tankHeight + 0);
  }

  colorSelection() {
    return this.colors[0];
  }

  tank1() {
    this.ctx.fillStyle = this.colorSelection();
    this.ctx.fillRect(0, 0, this.tankWidth, this.tankHeight);
  }
}

let core = new CanvasGame();
let player1 = new Tanks(core.ctx);

player1.tank1();

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

#game {
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <canvas id="game"></canvas>
  <script src="src/script.js"></script>
</body>

</html>

Upvotes: 0

StarshipladDev

Reputation: 1145

The first 2 parameters of fillRect are the top left x & y co-ords. You had set them to be the height & width of the whole canvas (ctx) so the tank was drawing, but its top left point was drawn at the visible canvas's bottom right corner!

See This page for more information on canvas, and good luck with the game!

Give @muzzletov a point as well since he has a valid statement about creating the canvas twice. You don't need to as 'Tank' Class already creates a canvas

class CanvasGame {
  constructor() {
    this.canvas = document.getElementById("game");
    this.ctx = this.canvas.getContext("2d");
    this.width = window.innerWidth;
    this.height = window.innerHeight;
  }
}

class Tanks extends CanvasGame {
  constructor() {
    super();
    this.tankWidth = 45;
    this.tankhHeight = 35;
    this.angle = "angle";
    this.power = "power";
    this.colors = ["purple", "red", "yellow", "green"];
    this.startPosXp1 = Math.floor(Math.random() * this.width + 0);
    this.startPosYp1 = Math.floor(Math.random() * this.height + 0);
  }

  colorSelection() {
    return this.colors[0];
  }

  tank1() {

    this.ctx.fillStyle = this.colorSelection();
    //this.ctx.fillRect(this.height, this.width,this.startPosXp1, this.startPosYp1);
    this.ctx.fillRect(0,0, this.startPosXp1, this.startPosYp1);
  }
}

//let core = new CanvasGame();
let player1 = new Tanks();

player1.tank1();

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

#game {
  display: block;
  width: 50%;
  height: 50%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <canvas id="game"></canvas>
  <script src="src/script.js"></script>
</body>

</html>

Upvotes: 1

muzzletov

Reputation: 688

You're confusing the parameters for fillRect - it's fillRect(x, y, width, height) not fillRect(width, height, x, y). Also, you do not need to instantiate the parent twice. Just create a Tank object.

Upvotes: 2

Canvas in a javascript class

Answers (3)

Related Questions