Sakyra,
<!doctype html>
<html>
<meta charset='utf-8'>
<head><title></title></head>
<body>
<canvas id='image' width="500" height="375" ></canvas>
<script>
var k = .3, op = .3 ,
img = document.getElementById('image'),
context = img.getContext('2d'),
pic = new Image();
pic.onload = function () {
context.canvas.width = pic.width;
context.canvas.height = pic.height*(1 + k);
context.drawImage(pic, 0, 0, pic.width, pic.height)
context.translate(0, pic.height)
context.scale(1, -1);
context.drawImage(pic, 0, -pic.height, pic.width, pic.height);
gradient = context.createLinearGradient(0, 0, pic.width,0);
gradient.addColorStop(0, "rgba(255, 255, 255, " + op + ")");
gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
context.fillStyle = gradient;
context.rect(0, -pic.height, pic.width, pic.height);
context.fill();
};
pic.src = 'http://multiki-kartinki.narod.ru/images/Pooh28_small.jpg';
</script>
</body>
</html>