Using destination-over to save background and actual sketch

Question

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?

*So you want new drawings over existing drawings?* If yes, the default mode of html canvas is to draw new drawings over the previous drawings--so you don't need `destination-over`. The destination-over compositing mode will draw new drawings behind the existing canvas content. — markE, Jun 16 '15 at 16:40
@markE What I really want is to download the image *with* the background image **and** sketch -- I though I need to use destination-over to do this — ᔕᖺᘎᕊ, Jun 16 '15 at 16:42
I'm still confused about what you want. Could you explain in more detail? — markE, Jun 16 '15 at 16:44
@markE I'm using Sketch.JS to draw on a canvas with a background-image. I now want to download this new image which will have the background image **and** the sketch, however using `toDataURL` only gives me the sketch. Overall: How do I save the image **with the sketch and the background image**? — ᔕᖺᘎᕊ, Jun 16 '15 at 16:46
@markE if you use the above snippet, draw on the image, click download, and copy+paste the Data URL - you'll see you only get the sketch. How do I get the background image *as well*? — ᔕᖺᘎᕊ, Jun 16 '15 at 16:47
So you want to combine a Sketch canvas over a background image and then get the data URL of the resulting combined canvas? — markE, Jun 16 '15 at 17:01

score 2 · Accepted Answer · answered Jun 16 '15 at 17:26

Assume you have a SketchJS canvas on top of an image containing a background:

#wrapper{positon:relative;}
#bk,#myCanvas{position:absolute;}

<div id='wrapper'>
    <img crossOrigin='anonymous' id=bk src='yourImage.png'>
    <canvas id="myCanvas" width=500 height=300></canvas>
</div>

Then when you want to combine the Sketch with the background and save it as an image you can use destination-over compositing to draw the background "under" the existing Sketch.

ctx.globalCompositeOperation='destination-over';
ctx.drawImage(bk, 0, 0);

Here's example code:

<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://rawgit.com/intridea/sketch.js/gh-pages/lib/sketch.js"></script>    
<style>
    body{ background-color: ivory; }
    #wrapper{positon:relative;}
    #bk,#myCanvas{position:absolute;}
</style>
<script>
$(function(){

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

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

    $('#download').click(function() {
          var img=document.getElementById('bk');
          ctx.globalCompositeOperation='destination-over';
          ctx.drawImage(bk, 0, 0);
          ctx.globalCompositeOperation='source-over';
          var html="<p>Right-click on image below and Save-Picture-As</p>";
          html+="<img src='"+c.toDataURL()+"' alt='from canvas'/>";
          var tab=window.open();
          tab.document.write(html);
    });

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Drag to sketch on the map.</h4>
    <button id=download>Download</button>
    <div id='wrapper'>
        <img crossOrigin='anonymous' id=bk src='https://dl.dropboxusercontent.com/u/139992952/multple/googlemap1.png'>
        <canvas id="myCanvas" width=459 height=459></canvas>
    </div>
</body>
</html>

ahhh - so I had to use `source-over` as well!! Thanks a lot :) — ᔕᖺᘎᕊ, Jun 16 '15 at 18:20
@ᔕᖺᘎᕊ, you're welcome--glad I could help. The source-over is just there to reset the canvas to its default mode just in case you want to do additional drawing. Good luck with your project! — markE, Jun 16 '15 at 18:26

Using destination-over to save background and actual sketch

1 Answers1