CODEWITHSUNDEEP
javascriptcanvas
Benjamin Gibbs710
Benjamin Gibbs710

Reputation: 143

FillStyle query or something else?

Just practicing using constructors that have arguments and have come across an error that I believe stems from the fillStyle method.

My canvas just appears blank and there are no errors on the console?

Trying to build 5 different circles each with their own specific color.

I've created a fiddle: https://jsfiddle.net/kvuf7dxb/;

The main bulk of code: 

    var circle1;
    var circle2;
    var circle3;
    var circle4;
    var circle5;


    function drawCircles() {

        ctx.clearRect(0,0,w,h);

        circle1 = new Circle(600,600,102,55);
        circle2 = new Circle(600,600,40,10);
        circle3 = new Circle(600,600,37,12);
        circle4 = new Circle(600,600,280,34);
        circle5 = new Circle(600,600,390,55);


    }

        function Circle(x, y, color,r) {
            this.x = x;
            this.y = y;
            this.color = color;
            this.r = r;

            this.show = function() {
                ctx.beginPath();
                ctx.moveTo(this.x,this.y);
                ctx.fillStyle = this.color;
                ctx.arc(this.x,this.y,this.r,0,Math.PI*2,true);
                ctx.fill();
            };
        }

I'm aware that all the circles will appear at the same x and y position.

Upvotes: 1

Views: 31

Answers (1)

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32869

There are several issues that need to be fixed. Here's a working version.

var canvas = document.getElementById('stars');
var ctx = canvas.getContext('2d');
var w = window.innerWidth;
var h = window.innerHeight;
canvas.width = w;
canvas.height = h;

var circle1 = new Circle(20, 20, '66CC00', 55),
    circle2 = new Circle(30, 30, 'FF0000', 10),
    circle3 = new Circle(40, 40, '3333FF', 12),
    circle4 = new Circle(50, 50, 'FFFF00', 34),
    circle5 = new Circle(70, 70, 'FF9933', 55);
    
drawCircles();

function drawCircles() {
    ctx.clearRect(0, 0, w, h);
    circle1.show();
    circle2.show();
    circle3.show();
    circle4.show();
    circle5.show();
    requestAnimationFrame(drawCircles);
}

function Circle(x, y, color, r) {
    this.x = w * x / 100;
    this.y = h * y / 100;
    this.color = '#' + color;
    this.r = r;
    this.show = function() {
        ctx.beginPath();
        ctx.fillStyle = this.color;
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        ctx.fill();
    };
}
body {
    background: black;
    overflow: hidden;
}
<canvas id="stars"></canvas>

Upvotes: 1

Related Questions