1 Reply Latest reply on Oct 1, 2012 8:50 AM by David_Powers

    Question scratch off effect DPS

    KevinHensels Level 1

      Hey there,

       

      I'm currently working on file that's going to be published on Ipad.

      I've added some scratch off effects for an advert, and that seems to work perfecttly.

       

      But here comes the question:

      They want me to create a small and simple" drawing app" as well.

      I'm very very new to HTML and well I figured out that I could basically could take the scratch-off code. And insert a white picture for frontimage and a black picture for the back image.

       

      It works, and even on the Ipad it does what I (and they) had in mind.

       

      BUT they want to be able to reset it (or have an eraser included) and they want some kind of "save button" as well.

      The save button needs to save it on the Ipads somewhere. And then they can send the drawing to wherever they want.

       

       

      Is that something that's even possible? I'm pretty much stuck here...

       

      thanks in advance

       

      Noob Saibot.

       

       

      code:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

       

       

      <html>

       

       

      <head>

       

       

      <title>ARGOS</title>

      <style type="text/css">

      body {

                font-family: sans-serif;

                margin-left: 0px;

                margin-top: 0px;

                margin-right: 0px;

                margin-bottom: 0px;

      }

       

       

      h1 {

                font-weight: bold;

                font-size: 1.2em;

      }

       

       

      .fineprint {

                font-size: 0.6em;

      }

       

       

      .bigtext {

                font-size: 5em;

      }

       

       

      .cell {

                display: table-cell;

                vertical-align: middle;

                text-align: center;

      }

       

       

      .cell canvas {

                vertical-align: middle;

      }

       

       

      .canthumb {

                border: 0px solid #222;

      }

       

       

      .bigtopmargin {

                margin-top: 5ex;

      }

       

       

      .hidden {

                display: none;

      }

       

       

      .blink {

                text-decoration: blink;

      }

       

       

      #main {

                margin:0px;

      }

       

       

      #maincanvas {

                border: 0px solid #222;

                cursor: pointer;

      }

      </style>

       

       

      <script type="text/javascript">

      //<![CDATA[

       

       

      (function() {

       

       

      var image = { // back and front images

                'back': { 'url':'backimage2.jpg', 'img':null },

                'front': { 'url':'foreimage.jpg', 'img':null }

      };

       

       

      var canvas = {'temp':null, 'draw':null}; // temp and draw canvases

       

       

      var mouseDown = false;

       

       

       

       

      function getLocalCoords(elem, ev) {

                var ox = 0, oy = 0;

                var first;

                var pageX, pageY;

       

       

       

                while (elem != null) {

                          ox += elem.offsetLeft;

                          oy += elem.offsetTop;

                          elem = elem.offsetParent;

                }

       

       

                if (ev.hasOwnProperty('changedTouches')) {

                          first = ev.changedTouches[0];

                          pageX = first.pageX;

                          pageY = first.pageY;

                } else {

                          pageX = ev.pageX;

                          pageY = ev.pageY;

                }

       

       

                return { 'x': pageX - ox, 'y': pageY - oy };

      }

       

       

      function recompositeCanvases() {

                var main = document.getElementById('maincanvas');

                var tempctx = canvas.temp.getContext('2d');

                var mainctx = main.getContext('2d');

       

       

                canvas.temp.width = canvas.temp.width;

       

       

       

                tempctx.drawImage(canvas.draw, 0, 0);

       

       

                tempctx.globalCompositeOperation = 'source-atop';

                tempctx.drawImage(image.back.img, 0, 0);

       

       

                mainctx.drawImage(image.front.img, 0, 0);

       

       

       

                mainctx.drawImage(canvas.temp, 0, 0);

      }

       

       

       

       

       

       

      function scratchLine(can, x, y, fresh) {

                var ctx = can.getContext('2d');

                ctx.lineWidth = 4;

                ctx.lineCap = ctx.lineJoin = 'round';

                ctx.strokeStyle = '#f00'; // can be any opaque color

                if (fresh) {

                          ctx.beginPath();

       

                          ctx.moveTo(x+0.01, y);

                }

                ctx.lineTo(x, y);

                ctx.stroke();

      }

       

       

       

       

      function setupCanvases() {

                var c = document.getElementById('maincanvas');

       

                c.width = image.back.img.width;

                c.height = image.back.img.height;

       

       

                canvas.temp = document.createElement('canvas');

                canvas.draw = document.createElement('canvas');

                canvas.temp.width = canvas.draw.width = c.width;

                canvas.temp.height = canvas.draw.height = c.height;

       

       

       

       

                recompositeCanvases();

       

       

       

                function mousedown_handler(e) {

                          var local = getLocalCoords(c, e);

                          mouseDown = true;

       

       

                          scratchLine(canvas.draw, local.x, local.y, true);

                          recompositeCanvases();

       

       

                          if (e.cancelable) { e.preventDefault(); }

                          return false;

                };

       

       

       

                function mousemove_handler(e) {

                          if (!mouseDown) { return true; }

       

       

                          var local = getLocalCoords(c, e);

       

       

                          scratchLine(canvas.draw, local.x, local.y, false);

                          recompositeCanvases();

       

       

                          if (e.cancelable) { e.preventDefault(); }

                          return false;

                };

       

       

                /**

                 * On mouseup.  (Listens on window to catch out-of-canvas events.)

                 */

                function mouseup_handler(e) {

                          if (mouseDown) {

                                    mouseDown = false;

                                    if (e.cancelable) { e.preventDefault(); }

                                    return false;

                          }

       

       

                          return true;

                };

       

       

                c.addEventListener('mousedown', mousedown_handler, false);

                c.addEventListener('touchstart', mousedown_handler, false);

       

       

                window.addEventListener('mousemove', mousemove_handler, false);

                window.addEventListener('touchmove', mousemove_handler, false);

       

       

                window.addEventListener('mouseup', mouseup_handler, false);

                window.addEventListener('touchend', mouseup_handler, false);

      }

       

       

       

       

       

       

      function loadingComplete() {

                var loading = document.getElementById('loading');

                var main = document.getElementById('main');

       

       

                loading.className = 'hidden';

                main.className = '';

      }

       

       

      function loadImages() {

                var loadCount = 0;

                var loadTotal = 0;

                var loadingIndicator;

       

       

                function imageLoaded(e) {

                          loadCount++;

       

       

                          if (loadCount >= loadTotal) {

                                    setupCanvases();

                                    loadingComplete();

                          }

                }

       

       

                for (k in image) if (image.hasOwnProperty(k))

                          loadTotal++;

       

       

                for (k in image) if (image.hasOwnProperty(k)) {

                          image[k].img = document.createElement('img'); // image is global

                          image[k].img.addEventListener('load', imageLoaded, false);

                          image[k].img.src = image[k].url;

                }

      }

       

       

       

       

      window.addEventListener('load', function() {

                var resetButton = document.getElementById('resetbutton');

       

       

                loadImages();

       

       

                resetButton.addEventListener('click', function() {

                                    // clear the draw canvas

                                    canvas.draw.width = canvas.draw.width;

                                    recompositeCanvases()

       

       

                                    return false;

                          }, false);

       

       

      }, false);

       

       

      })();

       

       

      //]]>

      </script>

       

       

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

      </head>

       

       

      <body>

      <div id="loading">Loading images<span class="blink">...</span></div>

       

       

      <div class="hidden" id="main">

       

       

      <div><canvas id="maincanvas"></canvas></div>

       

       

        

         

      </div>

       

       

      </body>

       

       

      </html>

        • 1. Re: Question scratch off effect DPS
          David_Powers Adobe Community Professional (Moderator)

          It's not so much HTML knowledge that you need, but JavaScript.

           

          The script that you have pasted in already contains the necessary code to reset the canvas. All you need to do is to add this HTML to the page:

           

          <div><canvas id="maincanvas"></canvas><button id="resetbutton">Clear</button></div>

           

          Saving the canvas is much more complex. Not only do you need to convert the canvas to an image and store it, but you also need a way to redisplay it. Sorry, I can't help with that part of the equation.