afaik resize is used to change the size of entire sketch, 

thanks kritztkrazy...However I had some trouble with the scale function and thats why i resorted to to using resize instead.
The problem with scaling is that when the image is scaled,any pixel updation such as a user defined draw tool,draws twice at scale level 2, thrice at scale level 3 and so on..This problem occurs only when i run it on the browser(processing.js)....It works perfectly in processing as such...any thought on this?

If you are resizing only occasionally and memory permits you could make a copy of the image and then resize and display the copy.

I am not familiar with using processing.js but you could try

1. pushMatrix();
2. scale(2); // scale the image to whatever?
   
3. // draw the image
4. popMatrix();
5. // draw the tools

Hopefully this will isolate the scaling to the drawing only.

Thanks quarks....But unfortunately...I am making certain updations in the image after reducin the size and then need to bring the image to its original size.Thus I would loose the updates made to the image if i display the copy.I did try saving the pixels that I updated....unfortunately when the image is resized the pixel numbers change and thus i cn update the same pixels again...

I'm sorry to use your thread for this question since it might not be your issue, but this seems to be the right place for it.

So, why do I get this error (the last line of code is highlighted):

ArrayIndexOutOfBoundsException: Coordinate out of bounds!

when trying to run this code:

1. PImage img1, img2;
2. float f;
3. int h1, w1, w2, h2;
4. void setup() {
5.   img1 = loadImage("http://1.bp.blogspot.com/_dyURgUbJ-Iw/S_nABsbf-dI/AAAAAAAABIg/1n7uHC4hlsg/s1600/Die%2BAntwoord%2B%2B2.jpg");
6.   size(img1.width, img1.height);
7.   background(255);
   
8.   w1 = img1.width;
9.   h1 = img1.height;
10. }
11. void draw() {
12.   background(255);
13.   f = (float)mouseX/width;
14.   w2 = (int)( w1*f );
15.   h2 = (int)( h1*f );
16.   img2 = img1;
17.   img2.resize(w2, h2);
18.   image(img2, 0, 0);
19. }

I'm trying to resize an image scaling it by the factor of mouseX/width. I'm always doing "img2=img1" because img1 is the original and its size doesn't change. What am I doing wrong?

Thanks, but only solution that seems to work for me is replacing

1. img2 = img1;

with

1. img2 = loadImage("http://1.bp.blogspot.com/_dyURgUbJ-Iw/S_nABsbf-dI/AAAAAAAABIg/1n7uHC4hlsg/s1600/Die%2BAntwoord%2B%2B2.jpg");

but this is just a normaln loading image which is very slow of course.

Here lies your problem:

1. void draw() {
     background(255);
     f = (float)mouseX/width;
     w2 = (int)( w1*f );
     h2 = (int)( h1*f );
     img2 = img1; //<---- HERE!
     img2.resize(w2, h2);
     image(img2, 0, 0);
   }