CODEWITHSUNDEEP
javascriptcanvas
TechEndling
TechEndling

Reputation: 76

Give id to a canvas

I have it so that when you (the PaintBrush) hit the finish everything clears and a button appears. When the button is clicked it starts level two, here it creates a new canvas. I've added some code so that when the button is clicked the old canvas is deleted, then the new one is made. However, this requires the canvas to have an id. how do i get this code:

canvas: document.createElement("canvas"),

To also include an id for it? I cannot have it say var canvas = blah blah and then have canvas.id = "canvas"; because of the way i have it set up.

P.S the remove code is this if you need to know:

Element.prototype.remove = function() {
this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
for(var i = this.length - 1; i >= 0; i--) {
    if(this[i] && this[i].parentElement) {
        this[i].parentElement.removeChild(this[i]);
    }
}
}

and in the button "click" function area i put this for the remove:

document.getElementById("canvas").remove();

Please help! Thanks in Advance!

EDIT: Here is some extra code to help, it is what occurs when the PaintBrush hits the finish:

else if (PaintBrush.crashWith(Finish)) {
  PaintBrush.y = 50;
var button = document.createElement("button");
button.innerHTML = "Level 3";
button.id = "button-2";  // add the id to the button
document.body.appendChild(button); // append to body
GameArena2.clear();
GameArena2.stop();
button.addEventListener ("click", function() {
startGame2();
document.getElement("canvas").remove();
document.getElementById("button-2").remove();
});

EDIT 2: Game canvas code:

var GameArena2 = {
  canvas: document.createElement("canvas"),
  start: function() {
    this.canvas.width = 1280;
    this.canvas.height = 480;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.frameNo = 0;
    this.interval = setInterval(updateGameArea2, 20);
  },
  clear: function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  },
  stop: function() {
    clearInterval(this.interval);
  },
  drawGameOver: function() {
    ctx2 = GameArena2.context;
        ctx2.fillStyle = "rgba(0,0,0,"+fader +")";
        ctx2.fillRect(0,0,GameArena2.width,GameArena2.height);
        drawStatic(fader/2);
        fader += .1 * 1/fps
        ctx2.fillStyle = "rgba(255,255,255," + fader + ")";
        ctx2.font = "72px sans-serif";
        ctx2.fillText("GAME OVER",GameArena2.width/2 - 220,GameArena2.height/2);
    }
}
function everyinterval(n) {
  if ((GameArena.frameNo / n) % 1 == 0) {
    return true;
  }
  else if ((GameArena.frameNo / n) % 1 == 0) {
    return true;
  }
  return false;
}

Upvotes: 1

Views: 9226

Answers (2)

m87
m87

Reputation: 4523

Simple! Just assign it immediately after the GameArena2 object is created.

var GameArena2 = {
    canvas: document.createElement("canvas"),
    start: function() { 
      ...
      ...        
}

// give id to a canvas
GameArena2.canvas.id = "GameArena2";

function everyinterval(n) {
    if ((GameArena.frameNo / n) % 1 == 0) { 
        ...
        ...        
}

Upvotes: 1

LellisMoon
LellisMoon

Reputation: 5020

I think the best way is to create a static function like this:

function createElementOnDom (type,id) {
   var element=document.createElement(type);
   element.id=id;
   return element;
}

console.log(createElementOnDom('CANVAS','myId'));

So you can simply create the canvas adding it his specific id using a simple single row function call like you need.

I only know a way to do direcly this on jQuery, that you wouldn't like to use.

simply you need to do that:

function createElementOnDom (type,id) {
       var element=document.createElement(type);
       element.id=id;
       return element;
    }

var GameArena2 = {
  canvas: createElementOnDom('CANVAS','myId'),

Upvotes: 2

Related Questions