hello, I have create 3 circle (black,red,yellow) , but how to link these circle order by yellow -->red -->black ? <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Canvas javascript api demo</title> <style type="text/css"> canvas { border:1px #000 solid; /*width:300px; height:300px;*/ } </style> </head> <body> <h1>this is a canvas api test page!</h1> <br> <canvas id="canvas" width="300" height="300">this browser does not support canvas...</canvas> <script type="text/javascript"> var $=function(id){ return document.getElementById(id); } window.onload=function(){ var ctx=$('canvas').getContext('2d'); //draw a circle ctx.fillStyle = "#000000"; //black ctx.beginPath(); ctx.arc(110, 180, 10, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); ctx.fillStyle = "#FF0000"; //red ctx.beginPath(); ctx.arc(75, 150, 10, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); ctx.fillStyle = "#FFFF00"; //yellow ctx.beginPath(); ctx.arc(75, 110, 10, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); } </script> </body> </html> Code (markup):
This seems to work: ctx.strokeStyle = "#000000"; //black ctx.beginPath(); ctx.moveTo(110, 180); ctx.lineTo(75, 150); ctx.lineTo(75, 110); ctx.stroke(); ctx.closePath(); Code (markup): If you want the lines outside of the circles, put this code first so that the circles cover the lines.