CODEWITHSUNDEEP
javascriptcanvas
Zoolu
Zoolu

Reputation: 39

render canvas circle in the centre of the browser window

I can't understand why my code isn't working, the circle is being drawn but not in the centre of the canvas, and it's much bigger than it should be and pix-elated. Any suggestions, help greatly appreciated. 

// safe code:
(function(global, library){

var spaceTime = function(container){

// if container is global object
if (typeof container === "object"){
  var cHeight = container.innerHeight;
  var cWidth = container.innerWidth;
}
// if container is a div box
else {
  var cHeight = container.style.height;
  var cWidth = container.style.width;
}
console.log("container is an "+typeof container);

// return unique instance each time sT is called
return new spaceTime.init(cHeight, cWidth);


}

// function constructor
spaceTime.init = function(height, width) {
  this.height = height;
  this.width = width;
}



// methods: override the default prototype property
spaceTime.prototype = {

checkDimensions: function() {
  console.log(this.height + this.width);
  console.log(this);
  return this;
},

sequence: function(divide) {

  // var getSize = this.getCentre(divide);
  var grow = this.expand(200);
  var box = this.setCanvas();
  // box.classList.add("box");
  document.body.appendChild(box);

  // nest this in a requestAnimationFrame and pass
  // the grow function to warp radius
  this.drawCircle(box, grow);

  return this;

},

// expands each unique instance.
expand: function(i) {
  i += 1;
  return i;
},

getCentre: function(axis) {
  // width axis
  if(axis === "x"){
    console.log(this.height / 2);
    return this.height / 2;

  }
  // height axis
  else if(axis === "y"){
    return this.width / 2;
  }
  // if undefined or the string doesn't match
  else{
    throw "please input an x or y axis to be proccessed";
  }
},

// canvas context object and it's api methods
drawCircle: function(c, radius) {

   var ctx = c.getContext("2d");

   var x = this.getCentre("x");
   var y = this.getCentre("y");
   console.log(x);
   console.log(y);

   // define the arc path
   ctx.beginPath();
   ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
   ctx.fillStyle = 'green';
   ctx.fill();

   // stroke it
   ctx.StrokeStyle = "#aaa";
   ctx.stroke();

   console.log(ctx);
   console.log(radius);

},

// set up the canvas element
setCanvas: function() {
 var c = document.createElement("canvas");
 c.style.height = this.height + "px";
 c.style.width = this.width + "px";

 console.log("new canvas element created");

 return c;
}

}



// override the prototype object with our own one.
spaceTime.init.prototype = spaceTime.prototype;


// reference and expose library to be invoked.
global.sT = spaceTime;


}(window));








// instance 1 of wormhole library
var inst1 = sT(this);

// method chaining
inst1.checkDimensions().sequence();

Upvotes: 0

Views: 102

Answers (1)

ankhzet
ankhzet

Reputation: 2569

Didn't you confused x and y axises here?

getCentre: function(axis) {
  if(axis === "x"){
    return this.height / 2;

  }
  else if(axis === "y"){
    return this.width / 2;
  }
...
},

drawCircle: function(c, radius) {

    ...

   var x = this.getCentre("x"); // will return this.height / 2
   var y = this.getCentre("y"); // will return this.width / 2
   console.log(x);
   console.log(y);

   ...
}

Eh, probably, you shouldn't use style attribute when defining canvas size. Look here

Upvotes: 4

Related Questions