сделать холст круг в центре окна браузера

Question

Я не могу понять, почему мой код не работает, круг рисуется, но не в центре холста, и он намного больше, чем должен быть и pix-elated. Любые предложения, помощь очень ценится.

// 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(); 

Answer 1

Разве вы не смутили х и у здесь?

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); 

    ... 
} 

Эх, наверное, вы не должны использовать style атрибут при определении размера холста. Посмотрите here