Question

I am creating a click and clear game. Once the user clicks some brick its adjacent bricks are checked for same color and all these bricks are bricks are cleared at once.

These are Cleared using clearRect() function.

Now this leaves a white patch right between the bricks above and bricks below leaving the above bricks hanging.

Now i want to bring these bricks above downward. How do i do this..?
Plz help

Answer 1

The question is quite vague, but based on the title, you’ll need to clear your canvas before you can redraw. Otherwise, the drawn elements would simply stack on top of each other.

To do this, call the function clearRect on the canvas itself:

function clear() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, 500, 500);
}

Where canvas is the ID of your canvas, and 500, 500 the dimensions. Now you’ll have an empty canvas where you can redraw everything again.

I once created a simple HTML5 canvas game as well, you might learn from the source code.