Méthode : CanvasRenderingContext2D.bezierCurveTo()

<canvas id="myCanvas" width="300" height="150"></canvas>
<script type="text/javascript">
var myCanvas=document.getElementById("myCanvas");
var myContext=myCanvas.getContext("2d");

/* Courbe de Bézier */
myContext.strokeStyle="#00f";
myContext.lineWidth=3;
myContext.beginPath();
myContext.moveTo(10,10);
myContext.bezierCurveTo(50, 75, 250, 10, 280, 130);
myContext.stroke();

/* Les points de contrôle */
myContext.strokeStyle="#f00";
myContext.beginPath();
myContext.arc(50, 75, 3, 0, Math.PI*2);
myContext.stroke();
myContext.beginPath();
myContext.arc(250, 10, 3, 0, Math.PI*2);
myContext.stroke();
</script>

<div class="btn inline" onclick="majSize(512)">512 * 512</div>
<div class="btn inline" onclick="majSize(256)">256 * 256</div>
<div class="btn inline" onclick="majSize(128)">128 * 128</div>
<div class="btn inline" onclick="majSize(45)">48 * 48</div>

<div>
<div class="btn inline" onclick="ptcolor='#F00';dispIcone()">Avec les points de controle</div>
<div class="btn inline" onclick="ptcolor='#FFF';dispIcone()">Sans les points de controle</div>
</div>

<canvas id="icone" width="512" height="512"></canvas>


<script type="text/javascript">

var bgcolor="#000";
var ptcolor="#F00";

function majSize(size) {
   var icone=document.getElementById("icone");
   icone.width=size;
   icone.height=size;
   dispIcone();    
}

function dispIcone() {

   var icone=document.getElementById("icone");
   var myContext=icone.getContext("2d");
   
   var scale=icone.width;
   myContext.strokeStyle=bgcolor;
   myContext.fillStyle=bgcolor;
   myContext.lineWidth=3;
   myContext.beginPath();
   myContext.clearRect(0,0,scale,scale);
   myContext.moveTo(0.1*scale,0.3*scale);
   
   /* Courbe de Bézier haut */
   var xc1=0.1*scale, yc1=0.0*scale, xc2=0.9*scale, yc2=0.0*scale;
   myContext.bezierCurveTo(xc1, yc1, xc2, yc2, 0.9*scale,0.3*scale);
   
   /* Courbe de Bézier droite */
   var xc3=0.9*scale, yc3=0.5*scale, xc4=0.8*scale, yc4=0.7*scale;
   myContext.bezierCurveTo(xc3, yc3, xc4, yc4, 0.5*scale,0.95*scale);
   
   /* Courbe de Bézier gauche */
   var xc5=0.1*scale, yc5=0.5*scale, xc6=0.2*scale, yc6=0.7*scale;
   myContext.bezierCurveTo(xc6, yc6, xc5, yc5, 0.1*scale,0.3*scale);
   
   
   myContext.stroke();
   myContext.fill();
   
   if (ptcolor!="#FFF") {
       /* Tous les points de controle */
       myContext.strokeStyle=ptcolor;
       myContext.beginPath();
       myContext.arc(xc1, yc1, 3, 0, Math.PI*2);
       myContext.stroke();
       myContext.beginPath();
       myContext.arc(xc2, yc2, 3, 0, Math.PI*2);
       myContext.stroke();
       
       myContext.strokeStyle=ptcolor;
       myContext.beginPath();
       myContext.arc(xc3, yc3, 3, 0, Math.PI*2);
       myContext.stroke();
       myContext.beginPath();
       myContext.arc(xc4, yc4, 3, 0, Math.PI*2);
       myContext.stroke();
       
       myContext.strokeStyle=ptcolor;
       myContext.beginPath();
       myContext.arc(xc5, yc5, 3, 0, Math.PI*2);
       myContext.stroke();
       myContext.beginPath();
       myContext.arc(xc6, yc6, 3, 0, Math.PI*2);
       myContext.stroke();
   }
   
   /* TEXTE */
   var fontSize=Math.round(scale/2.25);
   myContext.fillStyle="#fff";
   myContext.font="bold "+fontSize+"px verdana";
   var width=myContext.measureText("IP").width;
   myContext.fillText("IP", 0.53*scale-width/2, 0.54*scale)

}

dispIcone();

</script>

<style type="text/css">
canvas#icone {
   margin-top:20px;
   border:1px solid #888;
   background: #fff;
}
div.btn {
   border:1px solid #999;
   padding:4px;
   border-radius:5px;
   margin:5px;
   cursor: pointer;
}
div.btn:hover {
   background:#999;
   color:#fff;
}
div.inline {
   display:inline-block;
}


</style>