I have this declared the next square, that's easy, but now I want to do the same for a circle...

How I can do it? Thank You.

//Create Var
var squa = new Square(320, 380, 50, 50);

//Define the square
function Square(x, y, width, height) {
    "use strict";
    this.x = (x === null) ? 0 : x;
    this.y = (y === null) ? 0 : y;
    this.width = (width === null) ? 0 : width;
    this.height = (height === null) ? this.width : height;
}

//Draw the square as object
squa.fill(ctx);

I have this declared the next square, that's easy, but now I want to do the same for a circle...

How I can do it? Thank You.

//Create Var
var squa = new Square(320, 380, 50, 50);

//Define the square
function Square(x, y, width, height) {
    "use strict";
    this.x = (x === null) ? 0 : x;
    this.y = (y === null) ? 0 : y;
    this.width = (width === null) ? 0 : width;
    this.height = (height === null) ? this.width : height;
}

//Draw the square as object
squa.fill(ctx);

• javascript
• function
• oop
• object
• canvas

• 1 Why not just make a function Circle(x, y, r){ ... }? And use arc(). You can go about it in the same way. – Spencer Wieczorek Commented Oct 16, 2014 at 19:46
• Becouse Im worng and using Circle(x,y,w,h,r){...}, but now with (x, y, r) works perfect, thank you!! – Ghaelito Commented Oct 17, 2014 at 6:32

2 Answers 2

You can go about this in the same about you did for the Square. The only real difference is using the arc(x, y, r, startAngle, endAngle) method. With it to draw a circle you define the startAngle and endAngle to be 0 and 2pi. Like so: arc(x, y, r, 0, Math.PI*2). For drawing a circle you first need to call ctx.beginPath(); to state that you are going to draw some path or arc. For example this draws a circle at (100,100) with a radius of 10:

ctx.beginPath();
ctx.arc(100, 100, 10, 0, Math.PI*2);
ctx.fill(); // fill() is to fill in the circle, stroke() is for a empty circle.

So using the same style of coding that you used above, here is how you can make a Circle. As you can see it's done in practically the same way. Here is a Snippet below:

var ctx = document.getElementById("canvas").getContext("2d");

//Create Var
var circ = new Circle(100, 100, 20);

//Define the circle
function Circle(x, y, r) {
    "use strict";
    this.x = (x === null) ? 0 : x;
    this.y = (y === null) ? 0 : y;
    this.r = (r === null) ? 0 : r;
    
    this.fill = function(ctx) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI*2);
        ctx.fill();
    }
}

//Draw the circle as object
circ.fill(ctx);

canvas{ border: 1px solid black; }

<canvas width=200 height=200 id="canvas"></canvas>

A simple circle can be created by using the arc(x, y, radius, start-position-usually-zero, end-position-usually-three-sixty-degree).

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();
context.arc(50, 50, 10, 0, Math.PI*2);
context.fillStyle = 'FFF000';
context.fill();
context.closePath();

<canvas id="myCanvas" width="100" height="100"></canvas>

For drawing a ball as an object just wrap this up in a function with parameters - x-axis, y-axis, radius, and color-of-the-ball

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//invoking the object
var cir = new circle(30, 30, 15, '#000FFF');

function circle(x, y, radius, color){
  context.beginPath();
  context.arc(x, y, radius, 0, Math.PI*2);
  context.fillStyle = color;
  context.fill();
  context.closePath();
}

canvas{
  background-color: #fff000;
}

<canvas id="myCanvas" width="100" height="100"></canvas>