Topic: Canvas help

Hello all - I'm having a bit of trouble with the html canvas, and thought I'd ask for help. I've only just started playing around with it and already I'm a bit rubbish. If anyone can offer some guidance to where I'm going wrong it would be very much appreciated.

I've been trying to put together some Javascript that dynamically adds a canvas to a page, and then draws something (anything) to it. I've been able to do all the procedurally just fine, but I've been trying to do it in an object-oriented way, which has gone a bit wrong. Here's my code:

function world(x,y) {
	this.x = x;
	this.y = y;
	this.create = function() {
		thecanvas = document.createElement("canvas");
		thecanvas.id = "worldcanvas";
		thecanvas.style.width = this.x + "px";
		thecanvas.style.height = this.y + "px";
		thecanvas.width = this.x + "px";
		thecanvas.height = this.y + "px";
		window.document.body.appendChild(thecanvas);
		getcanvas = document.getElementById("worldcanvas");
	}
}

I'm then calling "myworld = new world(200,500)", and then "myworld.create()". This seems to successfully plonk a canvas onto the page. However, a second seperate function, that is supposed to get the canvas and then draw to it, doesn't work:

function draw(o) {
ctx = document.getElementById(o).getContext("2d");
ctx.fillRect(10,10,55,50);
}

I call that with "draw('worldcanvas')". According to Chrome's developer tools thing the canvas element is being created properly, and it seems to be getting the 2d context of the canvas element ok too, but nothing appears. Any ideas? Apologies if the answer is obvious! I have a feeling I'm not quite comprehending OO javascript and that's why I can't do it...

The resolution of a Canvas is intrinsic: it doesn't have units. Therefore you should remove the +"px" when setting the width and height of the canvas otherwise the user agent will ignore these assignments and default to 300 x 150. See the spec:

quote:

---

The canvas element has two attributes to control the size of the coordinate space: width and height. These attributes, when specified, must have values that are valid non-negative integers. The rules for parsing non-negative integers must be used to obtain their numeric values. If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.

---

source

Would be nice to see a page showing what you've got 'coz it's hard to get the whole picture with only these two snippets. From what I can see, you seem indeed a little flunky with OO in JavaScript Why you don't put the Canvas or Context as a private variable of your class eludes me, same thing about the hardcoded id of the canvas and why draw() isn't a public method of the class.

Here's how I'd approach such code:

function World( w, h )
{
    var _canvas = document.createElement('canvas'),
        _context;
    
    _canvas.width   = w;
    _canvas.height  = h;
    _context        = _canvas.getContext('2d');
    
	this.create = function()
	{
		_canvas.style.width     = this.x + 'px';
		_canvas.style.height    = this.y + 'px';
		window.document.body.appendChild( _canvas );
	}
	this.draw = function()
	{
	    _context.fillRect( 10,10, 55,50 );
	}
}

var myWorld = new World( 200,500 );
myWorld.create();
myWorld.draw();

HTH,

Aha! Thank you very much sir. Definitely quite confused with OO Javascript, particularly the notion of private variables etc. What you've done should help me to figure it out a bit better.

I wish this place was a bit busier, as it's an excellent source of inspiration.

TP: Spam removed

(Edited by Tyberius Prime on 07-30-2010 12:15)