Zeichenfunktion mit Bild als Untergrund.

Question

Ich möchte, dass bei einem Bild etwas eingezeichnet wird.
Daürf soll bei dem Fragenformat "Zeichenfläche" keine weiße Fläche als Untergrund genutzt werden, sondern ein Bild.

Derzeit scheint das Bild aber über dem gezeichneten zu liegen. Wie kann das verändert werden?

Code siehe unten.

Vielen Dank.

<div style="text-align: center;">
  <canvas id="%q.id%canvas" width="600" height="300" style="border: 1px solid #CCCCCC;"></canvas>
</div>
<!-- Note: Remove buttons as required -->
<div style="display: flex; justify-content: space-between; width: 300px; margin: 1em auto 2em;">
    <button type="button" id="%q.id%btnUndo" title="Rückgängig">◀</button>
    <button type="button" id="%q.id%btnClear" title="Bild löschen">Nochmal von vorne</button>
    <button type="button" id="%q.id%btnSend">Fertig, Weiter</button>
</div>

<script>
function Scribbler(qID, canvas) {
  var state = "new";  // new, init, changed, sent
  var ctx = canvas.getContext('2d');
  var img = new Image();
  img.src=
"https://www.soscisurvey.de/qmaster/FCI3.png?rnd=1d512e38"
  img.onload = function () {
    var pattern = ctx.createPattern(img, "no-repeat");
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

   var isDrawing = false;
   var btnClear = document.getElementById("%q.id%btnClear");
   var btnSend = document.getElementById("%q.id%btnSend");
   var btnUndo = document.getElementById("%q.id%btnUndo");
   var steps = [];
};

  function getPos(e) {
    var org = SoSciTools.getNodePos(canvas);
    var pos = SoSciTools.getMousePos(e);
    return {
      x : pos.x - org.x,
      y : pos.y - org.y
    };
  }

  function onDown(e) {
    state = "changed";
    storeStep();
    isDrawing = true;
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.shadowBlur = 1;
    ctx.lineJoin = ctx.lineCap = 'round';
    ctx.shadowColor = 'rgb(0, 0, 0)';
    var pos = getPos(e);
    ctx.moveTo(pos.x, pos.y);
    // Draw first dot
    onMove(e);
  }

  function onMove(e) {
    if (!isDrawing) {
      return;
    }
    var pos = getPos(e);
    ctx.lineTo(pos.x, pos.y);
    ctx.stroke();
  };

  function onUp() {
    isDrawing = false;
  };

  function onStop() {
    isDrawing = false;
  }

  function onClear() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }

  function storeStep() {
    steps.push(canvas.toDataURL());
  }

  function onUndo() {
    // based on https://www.codicode.com/art/undo_and_redo_to_the_html5_canvas.aspx
    if (steps.length === 0) {
      return;
    }
    var recent = steps.pop();
    var canvasPic = new Image();
    canvasPic.addEventListener("load", function () {
      ctx.drawImage(canvasPic, 0, 0);
    });
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    canvasPic.src = recent;
  }

  // Enable all the events
  if (Modernizr.pointerevents) {
    canvas.addEventListener("pointerdown", onDown, false);
    canvas.addEventListener("pointermove", onMove, false);
    canvas.addEventListener("pointerup", onUp, false);
    canvas.addEventListener("pointerout", onStop, false);
  } else {
    SoSciTools.attachEvent(canvas, ["mousedown", "touchstart"], onDown);
    SoSciTools.attachEvent(canvas, ["mousemove", "touchmove"], onMove);
    SoSciTools.attachEvent(canvas, ["mouseup", "touchend"], onUp);
    SoSciTools.attachEvent(canvas, ["mouseout", "touchcancel"], onStop);
  }

  if (btnClear) {
    btnClear.addEventListener("click", function() {
      if (confirm("Möchten Sie das Bild löschen?")) {
        onClear();
      }
    });
  }

  if (btnUndo) {
    btnUndo.addEventListener("click", onUndo);
  }
  
  // File transfer part
  function sendImage() {
    var imageBlob = canvas.toBlob(%q.id%.sendBLOB);
    state = "sent";
    return true;
  }

  // Function to be called when the blob is to be send
  function blobGetter(blobHandler) {
    // Only send something when changed since init or sent
    if (state !== "changed") {
      return false;
    }
    canvas.toBlob(blobHandler);
    state = "sent";
    return true;
  }

  // Use custom send button
  if (btnSend) {
    // Use custom submit button
    btnSend.addEventListener("click", sendImage);
    // Hide original button
    SoSciTools.submitButtonsHide();
  }

  // Alway send on form submission
  window.addEventListener("load", function() {
    %q.id%.registerOnSubmit(blobGetter);
  });
}

new Scribbler("%q.id%", document.getElementById("%q.id%canvas"));
</script>

Comments

> Derzeit scheint das Bild aber über dem gezeichneten zu liegen

Wie äußert sich das?

Wenn Sie einen Pretest-Link direkt (!) zur betroffenen Seite posten, sehe ich mir das gerne einmal an.

---

Ich meine es nun gelöst zu haben. Vielen Dank!