[Résolu] Aide au remplacement d'un canvas coloré par une image

Bonjour,
J'ai réussi à adapter un code pour créer un image à gratter à la souris... Elle fait apparaître une autre image placée dessous.
Mon problème est de remplacer le canvas coloré orange par une image lambda. J'ai essayé plein de trucs, mais si je suis là, c'est que je n'y arrive pas...

Voici la partie javascript où se trouve le fond coloré (orange) à remplacer par une image. Merci à ceux ou celles qui voudront bien me fournir leurs conseils :

<script id="rendered-js" >
$(function () {
  var canvas = document.getElementById("gratte");
  var ctx = canvas.getContext("2d");
  var lastX;
  var lastY;
  var mouseX;
  var mouseY;
  var canvasOffset = $("#gratte").offset();
  var offsetX = canvasOffset.left;
  var offsetY = canvasOffset.top;
  var isMouseDown = false;

  //@khadkamhn
  $('body,html').bind('selectstart', function () {return false;});
  var centerX = canvas.width / 5;
  var centerY = canvas.height / 5;
  var generate = function () {
    ctx.globalCompositeOperation = "source-over";
    ctx.beginPath();
    ctx.rect(0, 0, 280, 280);
	ctx.fillStyle = 'orange';//couleur à gratter
	
	    //ctx.fillStyle = "#ccc";
    //Pattern
    var img = document.createElement("canvas"),
    img_ctx = img.getContext('2d'),
    x,y,
    number,
    opacity = 1;
    img.width = 45;
    img.height = 45;
    for (x = 0; x < img.width; x++) {if (window.CP.shouldStopExecution(0)) break;
      for (y = 0; y < img.height; y++) {if (window.CP.shouldStopExecution(1)) break;
        number = Math.floor(Math.random() * 80);


      }window.CP.exitedLoop(1);
    }window.CP.exitedLoop(0);
    var png = document.createElement("img");
    png.setAttribute('src', img.toDataURL("image/jpg"));
    png.setAttribute('width', 45);
    png.setAttribute('height', 45);
    var pat = img_ctx.createPattern(png, "repeat");
    ctx.fillStyle = pat;
    //Pattern
    ctx.fill();
    ctx.font = "25px Castellar";
    ctx.fillStyle = "white";
    ctx.fillText("GRATTEZ-MOI", 50, 130);
    var coupons = ['<b>Avec la Pierre<br>On gagne à tous les coups !'];
    var coupon = coupons[Math.floor(Math.random() * coupons.length)];
    $('.message').html(coupon);
  };

  generate();
  $('.coupon-create').on('click', generate);

  function handleMouseDown(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    lastX = mouseX;
    lastY = mouseY;
    isMouseDown = true;
  }
  function handleMouseUp(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    isMouseDown = false;
  }
  function handleMouseOut(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    isMouseDown = false;
  }
  function handleMouseMove(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    if (isMouseDown) {
      ctx.beginPath();
      ctx.globalCompositeOperation = "destination-out";
	  ctx.rect(lastX, lastY, 30, 32, Math.PI * 2, false);
      ctx.fill();
      lastX = mouseX;
      lastY = mouseY;
    }
  }
  $("#gratte").mousedown(function (e) {handleMouseDown(e);});
  $("#gratte").mousemove(function (e) {handleMouseMove(e);});
  $("#gratte").mouseup(function (e) {handleMouseUp(e);});
  $("#gratte").mouseout(function (e) {handleMouseOut(e);});
  $('.gratte').removeAttr('style');
});
</script>

C'est bon j'ai résolu