3 Replies Latest reply on Dec 26, 2012 3:12 PM by FeZEC

    Canvas scratchcard with random images


      Hi, I am trying to combine a HTML5 scratch card similar to this:


      but want it to have about 25 random prizes "revealed", I can do a random image script in PHP and the Canvas scratch part, but can't figure out how to combine them. It would be great to not have to use PHP but whatever works. Anybody seen this in action or know how to do it?


      thanks in advance

        • 1. Re: Canvas scratchcard with random images
          jgrummel Adobe Employee

          You could write a javascript function that uses an image array.


          You're function would look a little something like this:


          <script type="text/javascript" >

                var myPix = new Array( "../images/prize1.jpg" , "../images/prize2.jpg" , "../images/prize3.jpg");


                function choosePrize() {

                      var randomNum = Math.floor( Math.random() * myPix.length);

                      document.getElementById('myPicture').src = myPix[randomNum];





          Hope this helps!


          • 2. Re: Canvas scratchcard with random images
            FeZEC Adobe Community Professional

            what you should do is create your canvas element,  retain a reference to a loaded image which will represent your revealed scratch card. Retain via an img reference. Use this image to create a byte Array via the Canvas API getImageData.  Then on the canvas apply a mouse move event listener, to which a handler will determine the mouse coordinates.  Then using the cavnas api, draw the image pixel at the corresponding mouse coordinates. Here is where it gets a bit complex you need to know how to turn coordinates into an index of the canvas pixels areas.  for example, coordinate 0,0 would represent the byte array positions 0-3. because rgba are broken into 4 indexes. In short every 4 indexes represent 1 pixel.  this means you need to consider your canvas area in terms of rows and columns.  fortunately, I have already created this formula to do image manipulations as you can see in the following example http://spilled-milk.com/html5/sand.html  The method you need is

            function pointToVector(a, b) {
                                var c = canvas;
                                var d = (b + c.height) % c.height * c.width + (a + c.width) % c.width;
                                return d * 4

            here you can pass in x and y and it will return the starting index.   now using putImageData, you can grab the pixel information from the retained image and put it in place of the canvas index.  I realize this is a bit complex as you must realize youre working with pixel manipulation. Meaning you need to break the image into a series of pixels.  If every canvas had possession of the DirtyRect, it would be so much easier as you could update specific regions with every single image stamp.    meaning that you could always say copy my entire image, past my entire image to the canvas, but only update the area I deem dirty.  Hope this helps. if you have further questions feel free to ask.

            • 3. Re: Canvas scratchcard with random images
              FeZEC Adobe Community Professional

              There actually is an easier way now that I think about it.  You can make use of the Canvas' context globalCompositeOperation method.  using a combination of its values you can create masks.  Where the mouse is you can draw a path that will erase what is beneath.  Thus revealing your image.