CODEWITHSUNDEEP
javascriptcanvas
Sindre Brattegard
Sindre Brattegard

Reputation: 13

Weird canvas result in my Tic Tac Toe game

I am currently trying to create a Tic Tac Toe game.

When I run it the drawings on the canvas get totally messed up. The circles are not drawn until the next cross is drawn and there are weird lines between the crosses and the circles. (Tried to post picture, but need 10 rep)

I have no idea why this is happening, but I know the problem is somewhere in the drawing process.

function drawIt(w, h, p) {
    //w is the x coordinates for the square where it is supposed to draw
    //the h is the y coordinates and p is just the number of the square
    if (turn == 0 && !pressed[p]) {
        ctx.moveTo(w, h);
        ctx.lineTo(w + (width / 3), h + (height / 3));
        ctx.moveTo(w + (width / 3), h);
        ctx.lineTo(w, h + (height / 3));
        ctx.stroke();
        turn = 1;
        pressed[p] = true;
    } else if (turn == 1 && !pressed[p]) {
        ctx.arc(w + (width / 6), h + (height / 6), width / 6, 0, 2 * Math.PI);
        //width and height is just the width and the height of the canvas
        ctx.stroke;
        turn = 0;
        pressed[p] = true;
    } else if (pressed[p]) {
        alert("!!!");
    }
}

I'm new to javascript so all help is much appreciated.

Upvotes: 1

Views: 110

Answers (2)

GarethOwen
GarethOwen

Reputation: 6133

Your second ctx.stroke is missing the brackets, so it won't draw the circle. But the circle has been added to the open path, and is therefore drawn when you later call ctx.stroke()

Upvotes: 1

GameAlchemist
GameAlchemist

Reputation: 19294

Try to add ctx.beginPath() each time you begin a path. Otherwise draws will just pile up.

Upvotes: 0

Related Questions