Question

Volevo solo ritagliare l'immagine in una curva .. ma ciò non accade .. Solo l'immagine sta mostrando e non con la clip.

HTML

<canvas id="leaf" width="500" height="500" style='left: 0; 
position: absolute; top: 0;'></canvas> 

JavaScript

var canvas = document.getElementById('leaf'); 
var context = canvas.getContext('2d'); 

/* 
* save() allows us to save the canvas context before 
* defining the clipping region so that we can return 
* to the default state later on 
*/ 

context.save(); 
context.beginPath(); 
context.moveTo(188, 150); 
context.quadraticCurveTo(288, 0, 388, 150); 
context.lineWidth = 10; 
context.quadraticCurveTo(288, 288, 188, 150); 
context.lineWidth = 10; 

context.clip(); 

context.beginPath(); 
var imageObj = new Image(); 
imageObj.onload = function() 
{ 
context.drawImage(imageObj, 10, 50); 
}; 

imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 

/* context.beginPath(); 
context.arc(x - offset, y - offset, radius, 0, 2 * Math.PI, false); 
context.fillStyle = 'yello'; 
context.fill(); 
*/ 

/* 
* restore() restores the canvas context to its original state 
* before we defined the clipping region 
*/ 

context.restore(); 
context.beginPath(); 
context.moveTo(188, 150); 
context.quadraticCurveTo(288, 0, 388, 150); 
context.lineWidth = 10; 
context.quadraticCurveTo(288, 288, 188, 150); 
context.lineWidth = 10; 

context.strokeStyle = 'blue'; 
context.stroke(); 

Answer 1

Dovete spostare tutto, dalla linea di context.save();-context.clip(); all'interno l'oggetto funzione delle vostre imgObj 's onload gestore:

imageObj.onload = function() 
{ 
    context.save(); 
    context.beginPath(); 
    context.moveTo(188, 150); 
    context.quadraticCurveTo(288, 0, 388, 150); 
    context.lineWidth = 10; 
    context.quadraticCurveTo(288, 288, 188, 150); 
    context.lineWidth = 10; 
    context.clip(); 
    context.drawImage(imageObj, 10, 50); 
}; 

Vedere http://jsfiddle.net/CSkP6/1/ per un esempio.

Answer 2

Quando, dopo l'avvio dello script, viene caricata l'immagine, non è più disponibile una tela ritagliata poiché la si ripristina in un secondo momento.
Hai bisogno di fare una funzione drawClipped, e lo chiamano nella funzione onload per esempio:

function drawClipped(context, myImage) = { 
    context.save(); 
    context.beginPath(); 
    context.moveTo(188, 150); 
    context.quadraticCurveTo(288, 0, 388, 150); 
    context.lineWidth = 10; 
    context.quadraticCurveTo(288, 288, 188, 150); 
    context.lineWidth = 10; 
    context.clip(); 
    context.drawImage(myImage, 10, 50); 
    context.restore(); 
}; 

var imageObj = new Image(); 
imageObj.onload = function() { 
    drawClipped(context, imageObj); 
}; 

imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';