Почему не меняется цвет?

Question

[durnevdanya]

Всем привет. Написал простую функцию на смену цвета. Но она почему то не работает. Если писать цвет напрямую в переменную, то все заработает, а если менять через функцию, то не работает, почему?
App.js

var game = new gameWindow(500,500, "canv");
game.setColor("green"); // Присваиваем зеленый цвет

Game.js

var canvas, ctx;
var width, height;

function gameWindow(width, height, id){

	var gameColor = "black";
	console.log("Before: "+gameColor); // Before: black

	document.write("<canvas width="+width+" height="+height+" id="+id+"></canvas>");
	

	this.setColor = function(clr){
		gameColor = clr; // Меняем черный на зеленый
		console.log("After: "+gameColor); // After: green
	}

	canvas = document.getElementById(id);
	ctx = canvas.getContext("2d");
	ctx.fillStyle = gameColor; // Назначаем новый цвет
	ctx.fillRect(0,0, width, height);

}

Answer 1

[Сергей delphinpro]

Когда вы вызываете setColor, у вас выполняются только две строки кода

gameColor = clr; // Меняем черный на зеленый
сonsole.log("After: "+gameColor); // After: green

Где работа с канвой? Почему она должна поменяться?

App.js

var game = new GameWindow(500,500, "canv"); // Функции-конструкторы принято именовать с большой буквы
game.setColor("green"); // Присваиваем зеленый цвет

Game.js

function GameWindow(width, height, id){

  document.write("<canvas width="+width+" height="+height+" id="+id+"></canvas>"); // пиздец, конечно, ну да ладно =)

  this.canvas = document.getElementById(id);
  this.width  = width;
  this.height = height;
  this.color  = "black"; // initial color
  this.ctx    = this.canvas.getContext("2d");

  console.log("Before: " + this.color);

  this.fillCanvas();
}

GameWindow.prototype.fillCanvas = function(){
    this.ctx.fillStyle = this.color;
    this.ctx.fillRect(0,0, this.width, this.height);
}

GameWindow.prototype.setColor = function(color){
    console.log("After: " + color); // After: green
    this.color = color;  // Меняем черный на зеленый
    this.fillCanvas();
}

Comments

[durnevdanya]

Не понимаю, что же еще должно выполняться?

[Сергей delphinpro]

durnevdanya: Обновил ответ

[durnevdanya]

Сергей:

document.write("<canvas width="+width+" height="+height+" id="+id+"></canvas>"); // пиздец, конечно, ну да ладно =)

А че такого, что прям пздц?

[Сергей delphinpro]

durnevdanya:

this.canvas = document.createElement('canvas');
this.canvas.setAttribute('width', width);
this.canvas.setAttribute('height', height);
this.canvas.id = id;

document.body.appendChild(this.canvas);

this.width  = width;
this.height = height;
...

document write вставляет туда откуда вызван. плюс вы еще и поиск элемента выполняете, который сами же создаете.