CODEWITHSUNDEEP
javascriptcanvas
Artskee
Artskee

Reputation: 59

Rectangle won't be drawn on canvas

I have created 2 object. One creates a canvas object and append it to the body of the html and another one should draw a rectangle which isn't. What am I doing wrong?

window.onload = function(){


    var oCanvas = {

        canvas : document.createElement("canvas"),
        ctx : document.createElement("canvas").getContext("2d"),

        create : function(){
            oCanvas.canvas.id = "canvas";
            oCanvas.canvas.width = 350;
            oCanvas.canvas.height = 350;
            oCanvas.canvas.style.background = "yellow";
            document.body.appendChild(oCanvas.canvas);

        }
    };
    var oMap = {
        createGrid : function(){
            oCanvas.ctx.fillRect(50, 25, 150, 100);
        }
    };

    oCanvas.create();
    oMap.createGrid();

};

Upvotes: 0

Views: 639

Answers (4)

HMR
HMR

Reputation: 39340

If this is a single object you can leave it as a object literal but if you were to create multiple instances then you can use constructor functions and prototype. An introduction to constructor functions and prototype can be found here.

Assuming there is only one oCanvas instance in use you can change your code to:

var oCanvas = {

    canvas : document.createElement("canvas"),
    ctx : null,/can't set it to anything yet
          //oCanvas doesn't exist yet here

    create : function(){
        oCanvas.canvas.id = "canvas";
        oCanvas.canvas.width = 350;
        oCanvas.canvas.height = 350;
        oCanvas.canvas.style.background = "yellow";
        document.body.appendChild(oCanvas.canvas);
        //set the context now
        this.ctx = this.canvas.getContext("2d");
    }
};
var oMap = {
    createGrid : function(){
        oCanvas.ctx.fillRect(50, 25, 150, 100);
    }
};

oCanvas.create();
oMap.createGrid();

Upvotes: 0

user1693593
user1693593

Reputation:

To use methods that self-references you can do it this way instead -

  • Create an object with an constructor instead - otherwise you won't be able to reference its definitions until after the object has been assigned to a variable causing errors.
  • Create a new instance of the object using the new keyword.

Now you can further improve it by using for example prototypes, but for simplicity:

function myCanvas() {

    /// create a reference to ourselves (saves us some headache later)
    var me = this;

    /// create a canvas as a property on this instance
    this.canvas = document.createElement("canvas");

    /// now this.canvas exists and we can get the context
    this.ctx = this.canvas.getContext("2d"),

    /// metod create which references 'me'
    this.create = function(){
        me.canvas.id = "canvas";
        me.canvas.width = 350;
        me.canvas.height = 350;
        me.canvas.style.background = "yellow";
        document.body.appendChild(me.canvas);
    }
};

/// create an instance (you can create several of this)
var oCanvas = new myCanvas();

Now it will work as you can see in this demo.

Upvotes: 2

matewka
matewka

Reputation: 10168

You're creating two separate canvases. When defining ctx property, you should refer to the canvas property, created before. Remove the ctx from the object definition and add it below, once the object is already defined:

var oCanvas = {

    canvas : document.createElement("canvas"),
    ...
}
oCanvas.ctx = oCanvas.canvas.getContext("2d");

Upvotes: 1

zshift
zshift

Reputation: 358

UPDATE: Seems I was beat, and this is a better solution: https://stackoverflow.com/a/20009730/1634430

You are creating 2 elements, and drawing in the wrong one. Solution is here: http://codepen.io/zshift/pen/gxoEA.

instead of 

...
canvas : document.createElement("canvas"),
ctx : document.createElement("canvas").getContext("2d"),
...

you should write

var element = document.createElement("canvas");

...
canvas: element,
ctx: element.getContext("2d"),
...

Upvotes: 0

Related Questions