clearing the canvas for reloading image?

Question

What am I doing wrong here??

I am writing an image to canvs using html5 image tag. what i want it to replace the last image onclick of the new image.. I am able to load image but on click of next image it overlaps the last loaded image.. Here is the code.. I'm trying to use clearRect() function

           function drawImage(imageObj){

            var stage = new Kinetic.Stage("container", 578, 500);
            var layer = new Kinetic.Layer();
            var x = stage.width / 2 - 200 / 2;
            var y = stage.height / 2 - 137 / 2;
            var width = 200;
            var height = 137;

            // darth vader
            var darthVaderImg = new Kinetic.Shape(function(){
                var context = this.getContext();

                context.clearRect(x,y,width,height);
                context.drawImage(imageObj, x, y, width, height);
                // draw invisible detectable path for image
                context.beginPath();
                context.rect(x, y, width, height);
                context.closePath(); 


          });

Did try this..its not working..and canvas.width=canvas.width will clear the whole canvas..I just want a section to be removed..so used context.clearRect(x,y,width,height) but it's also not working here. — boyfromnorth, Feb 24 '12 at 12:46

score 1 · Answer 1 · edited May 23 '17 at 11:58

1

Check this post.

canvas.width = canvas.width;

should clear your canvas.

edited May 23 '17 at 11:58

Community

1
1

answered Feb 24 '12 at 12:35

Çağdaş Bozman

2,537
16
21

Did try this..its not working..and canvas.width=canvas.width will clear the whole canvas..I just want a section to be removed..so used context.clearRect(x,y,width,height) but it's also not working here – boyfromnorth Feb 24 '12 at 12:48
Did you read the second answer of this [post](http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing) ? Try to save and restore the context when you're done cleaning with clearRect(). – Çağdaş Bozman Feb 24 '12 at 14:51
Hey I got it already..My kinetic.js file was outdated...so had to update it and the clear canvas feature was added to it..Thanks anyways..:) – boyfromnorth Feb 27 '12 at 06:38

score 0 · Answer 2 · answered Nov 18 '12 at 09:25

Use this function that I created

Call it this way -- clearCanvasGrid(/id of the canvas/)

function clearCanvasGrid(canvasname){
            var canvas = document.getElementById(canvasname); //because we are looping //each location has its own canvas ID
            var context = canvas.getContext('2d');
            //context.beginPath();

            // Store the current transformation matrix
            context.save();

            // Use the identity matrix while clearing the canvas
            context.setTransform(1, 0, 0, 1, 0, 0);
            context.clearRect(0, 0, canvas.width, canvas.height);

            // Restore the transform
            context.restore(); //CLEARS THE SPECIFIC CANVAS COMPLETELY FOR NEW DRAWING

        }

clearing the canvas for reloading image?

2 Answers2