Сохранить изображение веб-камеры как файл и загрузить его как фоновое изображение на холсте, фоновое изображение не меняется

Question

Я пытаюсь сохранить изображение в виде файла с веб-камеры, а затем загрузить его в качестве фонового изображения (всякий раз, когда я нажимаю кнопку привязки). Однако, когда я нажимаю кнопку привязки, мой файл меняется, но фоновое изображение (на холсте) остается прежним. Таким образом, фоновое изображение всегда является первым снимком. Когда я очищаю кеш, мое фоновое изображение на холсте устанавливается в последний файл. В чем проблема?

index.html

<button id ="snap">Snap Photo</button><br>
<canvas id ="canvas" width="800" height="500"></canvas>
<video id = "video" width="640" height="480" autoplay></video>
<script type="text/javascript" src="file.js"></script>

file.js

window.onload = function() {

  backgroundImage = null;

  // Grab elements, create settings, etc.
  var video = document.getElementById('video');

  // Get access to the camera!
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Not adding `{ audio: true }` since we only want video now
    navigator.mediaDevices.getUserMedia({
      video: true
    }).then(function(stream) {
      video.src = window.URL.createObjectURL(stream);
      video.play();
    });
  }

  //get canvas and context element
  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");

  // Trigger photo take
  document.getElementById("snap").addEventListener("click", function() {
      ctx.drawImage(video, 0, 0);
      var canvasData = c.toDataURL("image/png");
      var ajax = new XMLHttpRequest();
      ajax.open("POST",'testSave.php',false);
      ajax.setRequestHeader('Content-Type', 'application/upload');
      ajax.send(canvasData);
      backgroundImage = new Image();
      backgroundImage.src = "test.png";
  });

  //call update function every 80 nanoseconds
  setInterval(function() {
    update(c, ctx);
  }, 80);
}


function update(c, ctx) {
    //draw backgroundImage
  if (backgroundImage) {
    ctx.drawImage(backgroundImage, 0, 0, 640, 480);
  }
 }

testSave.php

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
  // Get the data
  $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];

  // Remove the headers (data:,) part.
  // A real application should use them according to needs such as to check image type
  $filteredData=substr($imageData, strpos($imageData, ",")+1);

  // Need to decode before saving since the data we received is already base64 encoded
  $unencodedData=base64_decode($filteredData);

  //echo "unencodedData".$unencodedData;

  // Save file. This example uses a hard coded filename for testing,
  // but a real application can specify filename in POST variable
  $fp = fopen( 'test.png', 'wb' );
  fwrite( $fp, $unencodedData);
  fclose( $fp );
}
?>