CODEWITHSUNDEEP
javascript
Aslan Almaniyazov
Aslan Almaniyazov

Reputation: 93

Javascript canvas: Set own color for two different objects (squares)

I'm real frustrated with this problem. So, I have following simple code:

var canvas = document.getElementById('canvasField');
var ctx = canvas.getContext('2d');

function Square(x, y, sizeOfSide) {

    this.draw = function () {
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(x + sizeOfSide, y);
        ctx.lineTo(x + sizeOfSide, y + sizeOfSide);
        ctx.lineTo(x, y + sizeOfSide);
        ctx.lineTo(x,y);
        ctx.closePath();
        ctx.stroke();
    }

    this.setColor = function (color) {
        ctx.fillStyle = color;
        ctx.fill();
    }
}

Square is my object. I can draw square and probably I can set fill-color for it. So next code works fine. 

var square1 = new Square(100, 100, 100);
var square2 = new Square(250, 200, 100);
square1.draw();
square1.setColor('green');
square2.draw();
square2.setColor('yellow');

https://i.sstatic.net/gz50K.png

But If I change it to this: 

var square1 = new Square(100, 100, 100);
var square2 = new Square(250, 200, 100);
square1.draw();
square2.draw();

square1.setColor('green');
square2.setColor('yellow');

it breaks down:

https://i.sstatic.net/Qeojl.png

It seems to me that I understand the reason. Two objects have the same context. And square2 sets color yellow for context and square1 loses his color. Maybe I am not right. I expected that they will be two independent objects and I'll be able to manipulate their conditions at any place in the code. I have no idea what to do next. Please help!

Upvotes: 1

Views: 621

Answers (2)

Nolyurn
Nolyurn

Reputation: 608

Most of time when you want to change something on a canvas, you have to draw it again. Your first block of code is good, if you want to change color of a square, use setColor then draw it again.

Upvotes: 0

Durga
Durga

Reputation: 15604

DEMO

var canvas = document.getElementById('canvasField');
var ctx = canvas.getContext('2d');

function Square(x, y, sizeOfSide) {

    this.draw = function () {
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(x + sizeOfSide, y);
        ctx.lineTo(x + sizeOfSide, y + sizeOfSide);
        ctx.lineTo(x, y + sizeOfSide);
        ctx.lineTo(x,y);
        ctx.closePath();
        ctx.stroke();
    }

    this.setColor = function (color) {
        this.draw();
        ctx.fillStyle = color;
        ctx.fill();
    }
}

//var square1 = new Square(100, 100, 100);
//var square2 = new Square(250, 200, 100);
//square1.draw();
//square1.setColor('green');
//square2.draw();
//square2.setColor('yellow');

var square1 = new Square(100, 100, 100);
var square2 = new Square(250, 200, 100);

//square1.draw();
//square2.draw();

square1.setColor('green');
square2.setColor('yellow');
canvas {
 border : 2px dotted blue;
}
<canvas id='canvasField' width=500 height=500></canvas>

Call the draw function of object inside setColor function. So it will draw the square first then will fill it using given color.

Upvotes: 1

Related Questions