fit an object on canvas

http://stackoverflow.com/q/17320391/2252829

HTML

<p>Try with different canvas resolutions</p>
<canvas id="myCanvas" width=800 height=300></canvas>

CSS

body {
    background-color: ivory;
}
canvas {
    border:1px solid red;
}

JavaScript

var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

 var courbeBezier: []
 
function addCourbe(x0,y0,cp1x,cp1y,cp2x,cp2y,x1,y1)
{
	courbeBezier.push([ ])

	courbeBezier[courbeBezier.length-1].push( {x:x0, y:y0 }) //origine
  
	courbeBezier[courbeBezier.length-1].push( {x:cp1x,y:cp1y }) //control 1
  
courbeBezier[courbeBezier.length-1].push( {  x:cp2x,     y:cp2y }) //control 2

 courbeBezier[courbeBezier.length-1].push( {  x:x1 ,     y:y1 }) //end
 
}

function draw()
{
       context.beginPath()
       // context.globalAlpha= 0
       context.fillStyle = Qt.rgba(255, 255, 255, 0.1)
			context.moveTo(courbeBezier[0][0].x,courbeBezier[0][0].y)
       for (var i =0;i<courbeBezier.length;i++)
        {
          if (i>0)
         context.lineTo(courbeBezier[i][0].x,courbeBezier[i][0].y)

          context.bezierCurveTo(courbeBezier[i][1].x, courbeBezier[i][1].y, courbeBezier[i][2].x,courbeBezier[i][2].y, courbeBezier[i][3].x,courbeBezier[i][3].y)


                    if (i>0)
context.lineTo(courbeBezier[i-1][0].x,courbeBezier[i-1][0].y)


                }
                ctx.fill()

                ctx.beginPath()
               ctx.globalAlpha= 1
//               // ctx.stroke()
                 ctx.globalCompositeOperation = "source-atop";
                ctx.fillStyle = "red";
                ctx.fillRect(0,0,width/2,height)
                ctx.fill()
      }
            
            
addCourbe(0, canvas.height-20  , canvas.width/2   ,  10     ,canvas.width/2  ,20     ,canvas.width  ,  10   )

addCourbe(canvas.width, 10  ,  canvas.width/2  ,  10+50  ,canvas.width/2  ,20+50  ,10  ,  canvas.height-10)

draw()