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>
1 answers
solution1
1 ACCPTED 2011-05-07 17:28:55
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.