Problem drawing multiple circles on HTML5 canvas

Question

Can you take a look at this demo and tell me how I can draw several circles on a canvas with different coordinates without repeating a bunch of codes?

As you can see on the demo and the following code

var ctx = $('#canvas')[0].getContext("2d"); ctx.fillStyle = "#00A308"; ctx.beginPath(); ctx.arc(150, 50, 5, 0, Math.PI * 2, true); ctx.arc(20, 85, 5, 0, Math.PI * 2, true); ctx.arc(160, 95, 5, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); 

I tried to use them under ctx , but it isn’t, so I tried to use 50 points for the loop, but I have a problem repeating and adding code like ctx.fill (); for all. Could you tell me how can I fix this?

thanks

Answer 1

This is due to the fact that you do not close the path, either with fill() or closePath() closes the path so that it does not try and connect all the elements. fill() fills the circles and closes the path, so we can just use that. You also need to use beginPath() so that they are separated from each other. Here are your three circles:

 var coords = [ [150,50], [20,85], [160,95] ]; for(var i = 0; i < coords.length; i++){ ctx.beginPath(); ctx.arc(coords[i][0], coords[i][1], 5, 0, Math.PI * 2, true); ctx.fill(); } 

In order not to repeat a bunch of code and have unique coordinates, save your X and Y positions in an array and use the for loop to go through it.

Answer 2

Constantly creating and closing new paths is not good advice.

You must combine all the fills / strokes of the same style and execute them in one callback. The difference in performance between these approaches appears very quickly with an increase in the number of polygons.

The way to this is to move the pen and make a path construction call for each circle; stroke / fill at the end with one shot. However, there is a quirk. When you move the point to the center and draw a circle, you will still see a horizontal line of radius drawn from the center of the circle to the circle.

To avoid this artifact, instead of moving to the center, we go to a circle. This skips the drawing of the radius. In fact, all of these commands are designed to track the path, and there is no way to describe the gap without calling closePath ; usually moveTo does this, but the HTML5 canvas API does not. This is an easy way to solve this problem.

 const pi2 = Math.PI * 2; const radius = 5; ctx.fillStyle = '#00a308'; ctx.beginPath(); for( let i=0, l=coords.length; i < l; i++ ) { const p = coords[i], x = px, y = py; ctx.moveTo( x + radius, y ); // This was the line you were looking for ctx.arc( x, y, radius, 0, pi2 ); } // Finally, draw outside loop ctx.stroke(); ctx.fill(); 

It is also worth considering, uses transformations and draws everything relative to the local coordinate system.

 ctx.fillStyle = '#00a308'; ctx.beginPath(); for( let i=0, l=coords.length; i < l; i++ ) { const p = coords[i]; ctx.save(); ctx.translate( px + radius, py ); ctx.moveTo( 0, 0 ); ctx.arc( 0, 0, radius, 0, pi2 ); ctx.restore(); } ctx.stroke(); ctx.fill(); 

Answer 3

You can easily create multiple circles with a for loop. You just need to draw an arc and fill it every time. Using your example, you can do something like this.

 var ctx = $('#canvas')[0].getContext("2d"); ctx.fillStyle = "#00A308"; for (var i = 0; i < 3; i++) { ctx.arc(50 * (i+1), 50 + 15 * i, 5, 0, Math.PI * 2, true); ctx.fill(); } 

Answer 4

An example of a script of many circles in different places drawn in a loop.

 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext( '2d' ); var cx = canvas.width/2; var cy = canvas.height/2; ctx.fillStyle = "#00A308"; var total_circles = 50; var radius = 100; for(i = 0; i < total_circles; i++){ var angle = i * 2 * Math.PI/total_circles; var x = cx + Math.cos(angle) * radius; var y = cy + Math.sin(angle) * radius; ctx.beginPath(); ctx.arc(x, y, 2, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); }