Skip to content

Instantly share code, notes, and snippets.

@ihsanberahim

ihsanberahim/index.html

Last active August 29, 2015 14:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ihsanberahim/855f50427b60a95e1561 to your computer and use it in GitHub Desktop.
Save ihsanberahim/855f50427b60a95e1561 to your computer and use it in GitHub Desktop.
Download ZIP
Watermark Image With JS
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
#watermarked{
background-color: #fff;
}
</style>
</head>
<body>
<canvas id="watermarked"></canvas>
</body>
</html>
Raw
jsbin.butogacoha.js
var canvas = document.getElementById('watermarked');
var ctx;
var layer = 0;
var images = [
{ url: 'http://lorempixel.com/output/animals-q-c-400-200-7.jpg', position: [0,0] },
{ url: 'http://lorempixel.com/output/fashion-q-c-60-60-3.jpg', position: [0,0] }
];
var process = function()
{
var image = new Image();
image.onload = function()
{
if(layer===0)
{
canvas.outerWidth = image.width;
canvas.outerHeight = image.height;
ctx = canvas.getContext('2d');
canvas.style.backgroundColor = 'red';
}
ctx.drawImage(image,
images[layer].position[0],
images[layer].position[1]);
layer++;
process();
};
image.src = images[layer].url;
};
process();
/* ihsanberahi.com */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment