В чём проблема то?
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<style type="text/css">
*{padding:0;margin:0;}
html,body{
width:100%;
height:100%;
background: rgb(157,213,58);
background: linear-gradient(135deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%);
}
</style>
</head>
<body>
<script type="text/javascript">
var img = new Image();
img.onload = goCanvas;
img.src = 'http://dobrochan.ru/src/png/1009/nya.png';
function goCanvas(){
var d = document,
canvas = d.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
d.body.appendChild(canvas)
}
</script>
</body>
</html>
Или нужна нужна
маска?
http://learn.javascript.ru/play/Lf6nqb