[Bezier curves with progress built into points?]

I'm trying to create a bezier curve that I can animate an icon over. I first tried creating the animated icon with the curve x, y coordinates like so:

 

TweenMax.to(icon, 3, {bezier:{type:'soft', curviness:1.25, values: [{x:350, y:95}, {x:200, y:495}, {x:610, y:580}], autoRotate:true}, ease:Power1.easeInOut});

 

Now I am trying to create the bezier line itself by using the HTML drawing canvas api, using the exact coordinates and I'm not getting the same curve?? Is there a reason??

 

context.bezierCurveTo(350,95,200,495,610,580);