watermark

by Craig Martin

HTML

<h2>canvas</h2>
<canvas id="img-holder"></canvas>
<h2>conventional way</h2>
<div class="watermark">
<img src="http://farm5.static.flickr.com/4147/5038258207_7974b3ce0f_m.jpg">
</div>

CSS

img{display:block;}
.watermark{position:relative;z-index:0;float:left;}
.watermark:after{
    display:block;
    position:absolute;
    content:'';
    z-index:20;
    width:130px;
    height:36px;
    background:url(http://l.yimg.com/e/serv/index/index3/img/logo_wretch.png);
    top:50px;
    left:50px;
}

JavaScript

var canvas = document.getElementById('img-holder').getContext('2d'),
    img;
img = document.createElement('img');
watermark = document.createElement('img');
img.src = 'https://cdn.shopify.com/s/files/1/0647/4927/3302/files/beforeafter3a.jpg';

watermark.src = 'https://cdn.shopify.com/s/files/1/0647/4927/3302/files/shigeru_lash_and_brow_logo.png';
canvas.drawImage(img, 0, 0);
canvas.drawImage(watermark, 5, 5);