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);