How to draw image pixel by pixel, after confirmation of purchase, on a spiral path, in Javascript?

Question

I'm handling a request from a non profitable organization to do the following:

Show a blured picture. As people buy pixels, the number of purchased pixels should be drawn on the image following a spiral path.

Paypal will be used and each pixel has a 0,10 Euros cost.

I already handled the evolution of the spiral, depending on the aspect ratio. Check here my function:

var width = 150;
var height = 50;

var x = -(width - height)/2;
var y = 0;
var dx = 1;
var dy = 0;
var x_limit = (width - height)/2;
var y_limit = 0;
var counter = 0;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

setInterval(function(){
   if ((-width/2 < x && x <= width/2)  && (-height/2 < y && y <= height/2)) {
       console.log("[ " + x + " , " +  y + " ]");
       ctx.fillStyle = "#FF0000";
       ctx.fillRect(width/2 + x, height/2 - y,1,1);
   }
   if( dx > 0 ){//Dir right
       if(x > x_limit){
           dx = 0;
           dy = 1;
       }
   }
   else if( dy > 0 ){ //Dir up
       if(y > y_limit){
           dx = -1;
           dy = 0;
       }
   }
   else if(dx < 0){ //Dir left
       if(x < (-1 * x_limit)){
           dx = 0;
           dy = -1;
       }
   }
   else if(dy < 0) { //Dir down
       if(y < (-1 * y_limit)){
           dx = 1;
           dy = 0;
           x_limit += 1;
           y_limit += 1;
       }
   }
   counter += 1;
   //alert (counter);
   x += dx;
   y += dy;      
   }, 1);

The code is available here: http://jsfiddle.net/hitbyatruck/c4Kd6/

My main problem is how to implement this without the need to loop it from the begining every time. Am I able to store the last bought coordinate and keep handling the loop from the last point?

Not being very experienced handling canvas and GUI, I need to make this efficient and safe.

So, I need to get the Paypal confirmation triggering the image processing, with the value introduced on the purchase.

All this must take place on a webpage, which at this time is just HTML and CSS.

Any help would be extremelly appreciated.

Answer 1

You cannot do this based solely on any client side operation, to my knowledge. Your problem stems from the fact that your client side JS variables are only available to the individual who is viewing the page. Multiple page views simply mean multiple, separate, and unrelated instances of those variables. The client hosts the JS, so once they leave your page... the scripts they interacted with (thus the variables) are gone. Unless you save them to a place that you host, such as your webserver (this is where a database or data file could live)

In regards to your question within the comments:
You could save the file and then read it on page load, however this will be difficult to maintain if ever required and kind of a messy hack (IMO)....

As for saving a file, take a look here: Write javascript output to file on server

Then to read it back, take a look here: How to read a text file from server using JavaScript?

Of course this is not a solution but hopefully it is a starting point.

---

Or use a database, but again that will require further server side work: Send data from javascript to a mysql database