如何在JavaScript类中正确使用HTML5的画布？

Question

First off, I use the term "classes" to mean functions with prototypes that might be in a separate file from the main initializing file for what I'm working on.

Now for my question/issue: I'm working on building something in JavaScript/HTML5, and trying to program it "properly" (ie. using prototypes with formats that are, I hope, standard). In my main JavaScript file, I have methods that have create use an instance (basically the root instance of my OOP/prototype based script) that sets up the canvas.

I also have another file that is loaded which contains a 'class' for creating clickable buttons. As of right now, I'm just trying to get the buttons to draw on the canvas, however, I can't access the instance of the canvas because I believe the instance is out of scope (which is fine, I don't want everything I do to contain a long dot-notation for referencing instances). However, this is giving me trouble when trying to draw a rectangle on the canvas, considering the 'class' the button is in, isn't able to reference the context outside of it.

I found a way around this by using something along the lines of:

function CreateButton(btn_x, btn_y, btn_width, btn_height, btn_txt) {

    // ... (check and define parameters)

    CreateButton.prototype.custom_canvas = document.getElementById('root_canvas');
    CreateButton.prototype.ctxt = this.custom_canvas.getContext('2d');

    CreateButton.prototype.ctxt.fillStyle = '#666666';
    CreateButton.prototype.ctxt.fillRect(this.x, this.y, this.width, this.height);
}

Basically, it's writing on top of the canvas with a canvas of the same name? I'd assume that I can still manipulate the regular canvas afterwards and it would just act as if it was a single canvas element. I worried that redrawing on the canvas might use up a lot of memory when many things are added, however, no matter the method, writing on top of the canvas can't be avoided (even when in the same scope).

Any suggestions, or help? Or is my method of using the same canvas within a different class acceptable?

Thanks for any feedback.

[UPDATE] Hmm, maybe I should try passing the context as a parameter and just using that.

...Or should I just make the canvas a global object? Any suggestions?

Answer 1

I guess you could try to implement some sort of "WidgetManager" that retains reference to canvas and your widgets. It will use a callback mechanism to render widgets. Each widget (ie. in this case Button) will have certain kind of rendering states (pressed, released) and some kind of internal state. Other widgets might have more complicated states.

Note that "WidgetManager" should probably keep track of widget "z" and user presses (which widget was hit). Based on this it should be able to trigger handlers bound to widgets. In a way you have to reinvent what basic UI libs do already. :)

I think you are better off by working out your design this way before moving into the implementation phase. A lot depends on what you really want to with it. :)

Note that you can simplify rendering and checks a lot by using multiple canvasii instead of just one. In this case you'll have to deal with z-index and absolute positioning but at least you get to piggyback on some of the existing stuff without having to implement it yourself.