Creating HTML5 Canvas Objects in Javascript

| | August 4, 2015

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');
body.appendChild(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');
  body.appendChild(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. :)

One Response to “Creating HTML5 Canvas Objects in Javascript”

  1. Arcadio Garcia on November 30, -0001 @ 12:00 AM

    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: http://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
    layers["background"]=somecontext;
    layers["foreground"]=someothercontext;
    //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 :)

Leave a Reply