CODEWITHSUNDEEP
javascriptcanvas
user3247903
user3247903

Reputation: 69

Canvas, moving objects, clearRect in javascript

Basically, my problem is that I cant understand why function clearRect which I use in code does not clean rectangles (For making them to move i used setinterval function). I have rectangles which are moving.

In Set Interval function you can see context.clearRect(0, 0, context.elem.width, context.elem.height); which I tried to put before the loop(did not work) and in the loop (the same :( ). Can to fix this?! Any help appreciated. Thanks.

window.onload = function () {

    function Shape(x, y, w, h, fill) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.fill = fill;
    }

    // get canvas element.
    var elem = document.getElementById('paper');
    context = elem.getContext('2d');
    //var container = {x:100, y:100, width:1200, height: 800};
    context.fillStyle = "black";
    context.fillRect(0, 0, elem.width, elem.height);


    // check if context exist
    if (elem.getContext) {

        var array = [];

        array.push(new Shape(20, 0, 50, 50, "red"));
        array.push(new Shape(20, 60, 50, 50, "red"));
        array.push(new Shape(20, 120, 50, 50, "red"));
        array.push(new Shape(80, 0, 50, 50, "red"));
        array.push(new Shape(80, 60, 50, 50, "red"));
        array.push(new Shape(80, 120, 50, 50, "red"));
        array.push(new Shape(140, 0, 50, 50, "red"));
        array.push(new Shape(140, 60, 50, 50, "red"));
        array.push(new Shape(140, 120, 50, 50, "red"));
        //context = elem.getContext('2d');
    }

    //function draw (){
    // context.fillStyle = 'red'; 
    //context.fillRect(container.x, container.y, container.width, container,height);
    //}

    setInterval(function () {

        /// clear canvas for each frame
        //context.clearRect(0, 0, context.elem.width, context.elem.height);

        /// iterate object array and move all objects
        for (var i = 0, oRec; oRec = array[i]; i++) {
            // context.clearRect(0, 0, context.elem.width, context.elem.height);

            oRec.x++; /// update each object's position
            context.beginPath();
            context.fillStyle = oRec.fill;
            context.fillRect(oRec.x, oRec.y, oRec.w, oRec.h);
            context.fill();

        }
    }, 40);
};

Upvotes: 1

Views: 1160

Answers (1)

user1693593
user1693593

Reputation:

Try with this instead as there is no elem property on context:

context.clearRect(0, 0, context.canvas.width, context.canvas.height);

or use elem directly (which is a tad faster and also shorter to write):

context.clearRect(0, 0, elem.width, elem.height);

Fiddle 1

The clearRect() clears everything on canvas including filled background (a canvas element is transparent by default and will be in initial state or becoming again when using clearRect()).

Either replace clearRect() with fillRect() using a black fillStyle or set a CSS background for the element (the latter won't be saved together with any image if that is needed, ie. toDataURL()).

With black background:

Fiddle 2 using CSS background

Fiddle 3 using fillRect instead of clearRect

You can optimize fillRect() further (as it is slower than clearRect()) by only clearing the boxes (remember to add a pixel on each side for anti-aliased pixels).

Upvotes: 1

Related Questions