I'm currently trying to learn how to make HTML5 Canvas games with JavaScript. I would like to use object oriented JavaScript to manage the elements of the game, but i'm having trouble. I've done a lot of research already, but there seems to be a million ways of doing everything and no one source has been able to provide me with the information I think I need in order to get the result I think I want. More specifically I'm having trouble utilizing object prototypes. I've started out by creating the canvas in my code like so

var body = document.getElementsByTagName("body")[0];
var canvas = document.createElement('canvas');

My thought process has lead me to thinking that I should make an object out of this so I can use this dynamically later on if needed. So i've implemented it like so.

var gamearea = function(){
this.generate = function(){
  var body = document.getElementsByTagName("body")[0];
  var canvas = document.createElement('canvas');

I know that I will probably need multiple contexts of the canvas element going forward, so I'm thinking that I should create a prototype for this like so.

var context = function() {
  return canvas.getContext('2d');

My thinking is that I can then ceate the objects for the context I need by instating them with there prototypes like so.

var background = Object.create(context);
var foreground = Object.create(context);

But in order to assign IDs to these objects so I can reference them for drawing on later, I need to assign IDs to them. I found a blog that indicated the proper formatting would mean implementing the following.

var background = Object.create(context, {id: {value: 'background'} });
var foreground = Object.create(context, {id: {value: 'foreground'} });

So my question is this. Is there a way to incorporate more unified formatting to all of this? Id like to establish this prototypes with their id's beforehand like I did with the gamearea object. I want to avoid giving objects properties inline. I am doing this right? Is there a better way? I'm I a complete idiot?

Thank you very much for your time on this guys, I really appreciate it. :)


closed as primarily opinion-based by Anko, Seth Battin, Josh Aug 10 '15 at 15:11

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.

  • \$\begingroup\$ Your question is about javascript usage and style. Even if it were game-specific (it's not), this would be an opinion-based question because there is no correct answer. If you want to use the language in a certain way, feel free, but this site is not a good place to solicit style opinion. You might find more useful help on the code review SE, but I believe they expect complete and working systems before providing a critique. \$\endgroup\$ – Seth Battin Aug 9 '15 at 0:34

Honestly I think you are creating problems out of nowhere :)

About the gamearea.generate function:

If I understand what you are trying it do, shouldn't it return "canvas" so you have a way to reference it later.

About the context function:

You will only need one context. Read the answer of this question: https://stackoverflow.com/questions/8417318/html-canvas-multiple-getcontext-plotting-at-same-time You only need (and can create) one context per canvas. You have two options: either your code should keep track of the "layers" and draw everything in order (I have a library that does that, I would recommend you have a look at code: http://spritesheet.js.org/), or create many canvas, each one with its context, and draw one layer in each one.

Also, I think you may not understand protypical-inheritance and JS "constructors" completely. Object.create(context); would only return a function that inherits from context, to get a context you only need to call it: ´var background = context();´. Also, it would return the same context on each call, you would need to specify the canvas as a parameter to make it reusable.

About the ids:

I think you are inventing a very complicated way to do it. If I'm right, you want to test if

x.id.value === "whatever"

I think you should consider: what is x? x would be the background variable, so... you already know that this is the background. Instead of storing the id inside the object, do it the other way around: link the reference to the object to the value. From example, you could create an object and use it as a hash table:

var layers={};
//Store the contexts
//Retrieve a context by its id
function getContext(id) {
  Return layers[id];
getContext("background");//Would return somecontext

I think your problem is not the canvas and context itself, but some lack of JavaScript basic knowledge and design patterns. I would recommend to you reading a good JS book like "JS: The good parts" or read some real-world code (not just DOM manipulation, real application code) and have a look at the design patterns used :)


Not the answer you're looking for? Browse other questions tagged or ask your own question.