[RESOLVIDO] Canvas + JavaScript

Front-end
#1

Estou começando a utilizar o html5, com ele fiz uma imagem com o elemento CANVAS e agora dentro desse desenho quero colocar uma imagem,
a imagem até aparece dentro do canvas, mas como ele tem uma parte em curva eu queria que a imagem ficasse "cortada"
mas o que está acontecendo é que está ficando por cima do canvas e não dentro dele.

        window.addEventListener('load', function () {
	  		var elemento = document.getElementById('banner');
			if(elemento.getContext) {
				var contexto = elemento.getContext('2d');
				var img = new Image();
				img.src = 'http://192.168.1.67/www/novoopa/galerias/Desert.jpg';
				img.onload = function(){
					//var meuPadrao = contexto.createPattern(img, 'repeat');
					//contexto.fillStyle = meuPadrao;
					contexto.drawImage(img,0,5);
				}
				contexto.beginPath();
				contexto.moveTo(0,5);
				contexto.lineTo(610,7);
				contexto.quadraticCurveTo(615,8,615,15);
				contexto.lineTo(615,380);
				contexto.quadraticCurveTo(620,401,600,395);
				contexto.quadraticCurveTo(280,361,0,378);
				contexto.lineTo(0,5);
				contexto.fill();
				contexto.closePath();
			} else {
				window.alert("Desculpe, seu browser não tem suporte a canvas, por favor instale um navegador descente.");
			}
		}, false);
#2

Consegui resolver o problema, se alguém precisar o código está aqui.

window.addEventListener('load', function () {
	  		var elemento = document.getElementById('banner');
			if(elemento.getContext) {
				var contexto = elemento.getContext('2d');
				var img = new Image();
				img.src = 'http://192.168.1.67/www/novoopa/galerias/Desert.jpg';
				img.onload = function(){
					//var meuPadrao = contexto.createPattern(img, 'repeat');
					contexto.save();
					
					contexto.beginPath();
					contexto.moveTo(0,5);
					contexto.lineTo(610,7);
					contexto.quadraticCurveTo(615,8,615,15);
					contexto.lineTo(615,380);
					contexto.quadraticCurveTo(620,401,600,395);
					contexto.quadraticCurveTo(280,361,0,378);
					contexto.lineTo(0,5);
					//contexto.fill();
					contexto.closePath();
					
					contexto.clip();
					contexto.drawImage(img,0,5);
					contexto.restore();
				}
				
			} else {
				window.alert("Desculpe, seu browser não tem suporte a canvas, por favor instale um navegador descente.");
			}	  
		}, false)
#3

Olá EHS,

Você teria algum exemplo usando Canvas que curve um texto ou imagem ao redor de um objeto. Um bom exemplo seria um texto ou imagem em uma garrafa.

Obrigado!

#4