EzDevInfo.com

sketch.js

Cross-Platform JavaScript Creative Coding Framework

Using destination-over to save background and actual sketch

I've read this and a few other questions, and it is clear I need to use destination-over to save the background and the sketch by display the new image over the old one.

I'm using Sketch.JS with my code as such:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

$('#myCanvas').sketch({
  defaultColor: "red"
});

$('#download').click(function() {
  ctx.globalCompositeOperation = "destination-over";
  img = new Image();
  img.setAttribute('crossOrigin', 'anonymous');
  img.src = 'http://lorempixel.com/400/200/';
  ctx.drawImage(img, 0, 0);
  $('#url').text(c.toDataURL('/image/png'));
  window.open(c.toDataURL('/image/png'));
});

#myCanvas {
  background: url(http://lorempixel.com/400/200/);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/intridea/sketch.js/gh-pages/lib/sketch.js"></script>
<canvas id="myCanvas"></canvas>
<input type='button' id='download' value='download'>
<span id='url'></span>

Fiddle

But that doesn't help. Clicking 'download' still only produces the sketch. Now, it seems I don't understand how I need to use destination-over properly. W3Schools doesn't seem to help.

Could anyone point me in the right direction please?

Source: (StackOverflow)