drawing more than one bezier path in the canvas

Question

I recently started drawing in the canvas. I want to draw a rounded rectangle with a circle inside of it but the circle gets connected to the previous path. How can I draw this so I won't have both figures connected by a line?

<html>
<div class="canvas-container">
    <canvas id="mistakenBezier">canvas not supported</canvas> 
    <script type="text/javascript">
         var canvas = document.getElementById("mistakenBezier");
        if(canvas.getContext){
        var ctx = canvas.getContext('2d');

            //inputs:
            var x = 20, y = 20;     //rectangle origin
            var w = 160, h = 120;   //rectangle size
            var r = 10;         //rectangle corner radius
            //draw rounded rect:
            ctx.beginPath();
            ctx.moveTo(x,y+h-r);
            ctx.lineTo(x,y+r);      ctx.bezierCurveTo(x,y,x+r,y,x+r,y);
            ctx.lineTo(x+w-r,y);    ctx.bezierCurveTo(x+w,y,x+w,y+r,x+w,y+r);
            ctx.lineTo(x+w,y+h-r);  ctx.bezierCurveTo(x+w,y+h,x+w-r,y+h,x+w-r,y+h);
            ctx.lineTo(x+r,y+h);    ctx.bezierCurveTo(x,y+h,x,y+h-r,x,y+h-r);
            ctx.stroke();
            //ctx.closePath();

            //draw circle
            //ctx.beginPath();
            //ctx.moveTo(x,y+h-r);
            ctx.arc(x+r+10,y+r+10,r,0,Math.PI*2,true);
            //ctx.closePath();
            ctx.stroke();


        }
    </script>
</div>
</html>

You might want to take a look at [this question](http://stackoverflow.com/q/1255512/102441). You'd do better to use the `arc` command than the `bezierCurveTo` one. — Eric, May 07 '11 at 17:45

Declan Cook · Accepted Answer · 2011-05-07T17:41:23.160

The line your seeing is because you need to moveto the starting point of the arc your drawing or you will draw a line form the current location to where you set you arc to start drawing.

the line ctx.moveTo(x+r+10+r,y+r+10); needed to be above your arc call.

Example in one long path

<html>
 <div class="canvas-container">
  <canvas id="mistakenBezier">canvas not supported</canvas> 
  <script type="text/javascript">
     var canvas = document.getElementById("mistakenBezier");
    if(canvas.getContext){
    var ctx = canvas.getContext('2d');

        //inputs:
        var x = 20, y = 20;     //rectangle origin
        var w = 160, h = 120;   //rectangle size
        var r = 10;         //rectangle corner radius
        //draw rounded rect:
        ctx.beginPath();
        ctx.moveTo(x,y+h-r);
        ctx.lineTo(x,y+r);      ctx.bezierCurveTo(x,y,x+r,y,x+r,y);
        ctx.lineTo(x+w-r,y);    ctx.bezierCurveTo(x+w,y,x+w,y+r,x+w,y+r);
        ctx.lineTo(x+w,y+h-r);  ctx.bezierCurveTo(x+w,y+h,x+w-r,y+h,x+w-r,y+h);
        ctx.lineTo(x+r,y+h);    ctx.bezierCurveTo(x,y+h,x,y+h-r,x,y+h-r);

        //draw circle
        ctx.moveTo(x+r+10+r,y+r+10);
        ctx.arc(x+r+10,y+r+10,r,0,Math.PI*2,true);      
        ctx.stroke();


      }
   </script>
  </div>
</html>

You can also stroke at the end of the rectangle and then begin a new path for the circle like so.

<html>
 <div class="canvas-container">
<canvas id="mistakenBezier">canvas not supported</canvas> 
<script type="text/javascript">
  var canvas = document.getElementById("mistakenBezier");
  if(canvas.getContext){
  var ctx = canvas.getContext('2d');

  //inputs:
  var x = 20, y = 20;     //rectangle origin
  var w = 160, h = 120;   //rectangle size
  var r = 10;         //rectangle corner radius
  //draw rounded rect:
  ctx.beginPath();
  ctx.moveTo(x,y+h-r);
  ctx.lineTo(x,y+r);      ctx.bezierCurveTo(x,y,x+r,y,x+r,y);
  ctx.lineTo(x+w-r,y);    ctx.bezierCurveTo(x+w,y,x+w,y+r,x+w,y+r);
  ctx.lineTo(x+w,y+h-r);  ctx.bezierCurveTo(x+w,y+h,x+w-r,y+h,x+w-r,y+h);
  ctx.lineTo(x+r,y+h);    ctx.bezierCurveTo(x,y+h,x,y+h-r,x,y+h-r);
  ctx.stroke();

  //draw circle
  ctx.beginPath()
  ctx.arc(x+r+10,y+r+10,r,0,Math.PI*2,true);      
  ctx.stroke();

  }
</script>
</div>
</html>

drawing more than one bezier path in the canvas

1 Answers1