title: How to display the dynamically images in the Scratch Card
body: <p>We been developing an Asp.net MVC4 application, in that we need to show a scratch card in which the background image/text should display dynamically. We have found some samples while searching and tried to apply those samples with dynamically created images or text we are getting plain html page. If we running with statis values the application is running fine. Here i'm using viewbag to store the dynamic created image url and try to use that viewbag in the .cshtml page </p>
  
  <pre><code>Dynamically getting the image url
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/kfBUG.jpg" alt="enter image description here"></p>
  
  <pre><code>Image with static url
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/ANQUq.jpg" alt="enter image description here"></p>
  
  <p>Could anyone provide me any solution how can i achieve this issue.</p>
  
  <p>below code in <code>.cshtml</code> page </p>
  
  <blockquote>
    <p>In the below code commented code which i have tried in other ways.</p>
  </blockquote>
  
  <pre><code> @{
       ViewBag.Title = "ScratchCard";
    }
    &lt;script src="~/Scripts/jquery-1.7.2.js"&gt;&lt;/script&gt;
    &lt;script src="~/Scripts/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
  
    @*&lt;script src="//code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
    &lt;script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;*@
  
    &lt;script src="~/Scripts/jquery.jScratchcard.js"&gt;&lt;/script&gt;
  
    @*&lt;script src="~/Scripts/wScratchPad.js"&gt;&lt;/script&gt;*@
  
  &lt;style&gt;
  .scratchpad
  {
      width: 100px;
      height: 100px;
      border: solid 1px;
  }
  
  #wScratchPad
  {
      display: inline-block;
      position: relative;
  }
  &lt;/style&gt;
  &lt;fieldset&gt;
  @*&lt;div id="ScratchPad" class="scratchpad"&gt;&lt;/div&gt;*@
  
  &lt;div id="wScratchPad" style="display: inline-block; position: relative; border: solid black 1px;"&gt;&lt;/div&gt;
  
  &lt;div&gt;
      &lt;a id="reset" href="javascript:reset_to_defaults();"&gt;reset to defaults&lt;/a&gt; |
  
      &lt;a id="reset" href="javascript:reset();"&gt;reset&lt;/a&gt; |
  
      &lt;a id="reset" href="javascript:reset_with_new_color();"&gt;reset with new color&lt;/a&gt; |  
  
      &lt;a href="javascript:get_color();"&gt;get color&lt;/a&gt; |
  
      &lt;a href="javascript:set_image_bg();"&gt;set image background&lt;/a&gt; |
  
      &lt;a href="javascript:set_image_overlay();"&gt;set overlay image&lt;/a&gt;
  &lt;/div&gt;
  &lt;div&gt;
      percent scratched: &lt;span id="percent_scratched"&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div id="content" style="display: none"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      $(function () {
          var pool = [10001, 20002, 30003, 40004, 50005];
          var getNumber = function () {
              if (pool.length == 0) {
                  throw "No numbers left";
              }
              var index = Math.floor(pool.length * Math.random());
              var drawn = pool.splice(index, 1);
              return drawn[0];
          };
  
          var c = document.getElementById("arr");
          var b = getNumber();
  
          $("#wScratchPad").wScratchPad({
              image: './Images/ScartchCard_FG.jpg',
              text: b,
              scratchMove: function (e, percent) {
                  if (percent &gt; 70)
                      this.clear();
              },
          });
      })
  &lt;/script&gt;
  
  @*&lt;style type="text/css"&gt;
      #canvas, #overlay
      {
          border: 1px solid #222;
          cursor: pointer;
          position: absolute;
          top: 0px;
          left: 0px;
      }
  &lt;/style&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      var topImage = new Image();
      var bottomImage = new Image();
      var coinImage = new Image();
      bottomImage.src = '@ViewBag.FilePath'
      coinImage.src = "";
  
      function init() {
          var isMouseDown = false;
          var canvasWidth = $('#canvas').width();
          var canvasHeight = $('#canvas').height();
          $('body').append('&lt;canvas id="overlay" width="' + canvasWidth + '" height="' + canvasHeight + '" /&gt;'); // Create the coin overlay canvas
          var overlayctx = $('canvas')[1].getContext('2d');
          overlayctx.drawImage(coinImage, 0, 0);
  
  
          function scratchOff(x, y) {
              mainctx.save();
              mainctx.beginPath();
              mainctx.arc(x, y, radius, 0, Math.PI * 2, false); // we don't fill or stroke the arc intentionally
              mainctx.clip();
              mainctx.drawImage(bottomImage, 0, 0);
              mainctx.restore();
          }
  
          $('#overlay').mousedown(function (e) {
              isMouseDown = true;
              var relX = e.pageX - this.offsetLeft;
              var relY = e.pageY - this.offsetTop;
              scratchOff(relX, relY, true);
          });
          $('#overlay').mousemove(function (e) {
              var relX = e.pageX - this.offsetLeft;
              var relY = e.pageY - this.offsetTop;
              overlayctx.clearRect(0, 0, canvasWidth, canvasHeight);
              overlayctx.drawImage(coinImage, relX - radius, relY - radius);
              if (isMouseDown) scratchOff(relX, relY, false);
          });
          $('#overlay').mouseup(function (e) {
              isMouseDown = false;
          });
  
          var mainctx = $('canvas')[0].getContext('2d');
          var radius = 15;
          topImage.onload = function () {
              mainctx.drawImage(topImage, 0, 0);
          };
          topImage.src = "top-300.jpg";
      }
  &lt;/script&gt;
  
      &lt;canvas id="canvas" width="300" height="225"&gt;&lt;/canvas&gt;*@
  
  
  @*&lt;script type="text/javascript"&gt;
      var sp = $("#wScratchPad").wScratchPad({
          image: './Images/8-18-2014_635439630600880975.jpg',
          scratchDown: function (e, percent) { $("#percent_scratched").html(percent) },
          scratchMove: function (e, percent) { $("#percent_scratched").html(percent) },
          scratchUp: function (e, percent) { $("#percent_scratched").html(percent) }
      });
  
      function reset_to_defaults() {
          sp.wScratchPad('image', null);
          sp.wScratchPad('image2', './Images/8-18-2014_635439630600880975.jpg');
          sp.wScratchPad('color', '#336699');
          sp.wScratchPad('overlay', 'none');
          sp.wScratchPad('text', 'none');
          sp.wScratchPad('reset');
      }
      function reset() {
          sp.wScratchPad('reset');
      }
  
      function reset_with_new_color() {
          sp.wScratchPad('color', '#FF0000');
          sp.wScratchPad('image2', null);
          sp.wScratchPad('reset');
      }
  
      function get_color() {
          alert(sp.wScratchPad('color'));
      }
  
      function set_image_bg() {
          //sp.wScratchPad('image', './Images/ScartchCard_FG.jpg');
          sp.wScratchPad('image', null);
      }
  
      function set_image_overlay() {
          sp.wScratchPad('image2', './Images/8-18-2014_635439630600880975.jpg');
          sp.wScratchPad('reset');
      }
  &lt;/script&gt;*@
  
  @*&lt;script type="text/javascript"&gt;
      //$(document).ready(function () {
      //    $("#ScratchPad").wScratchPad({
      //        cursor: '',
      //        image: '~/Images/orderedList9.png',
      //        text: '123',
      //        scratchMove: function (e, percent) {
      //            if (percent &gt; 70)
      //                this.clear();
      //        },
      //    });
      //})
  
      $('#ScratchPad').wScratchPad({
          bg: './Images/8-18-2014_635439630600880975.jpg',
          fg: './Images/ScartchCard_FG.jpg',
          'cursor': '',
          scratchMove: function (e, percent) {
              //$('#demo1-percent').html(percent);
          }
      });
  
      ////$('#ScratchPad').wScratchPad({
      ////    cursor: '',
      ////    image: './Images/ScartchCard_FG.jpg',
      ////    text: '123',
      ////    scratchMove: function (e, percent) {
      ////        if (percent &gt; 70)
      ////            this.clear();
      ////    },
      ////});
  &lt;/script&gt;*@
  </code></pre>
  
  <p></p>
  
  <p>In the <code>Controller Page</code></p>
  
  <pre><code>    public ActionResult ScratchCard()
      {
          ViewBag.FilePath = "./Images/8-18-2014_635439630600880975.jpg";
          return View();
      }
  
  Network tab
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/MgfSn.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/x5hC5.png" alt="enter image description here"></p>
  
  <p>Thanks in Advance,</p>