Hello Guys,

I need your help, I want to draw growing circles like a darts board and like attached picture using jQuery (I prefer) or another javascript library.


Recommended Answers

All 7 Replies


Try Raphaël or jsDraw2D


I read about HTML5 canvas tag and saw some examples about it, but I want to know how to start working with html5


I've not used it but the general approach is to download the lib to your hard disk (and upload to your web site if necessary), install it on your page with <script type="text/javascript" src="....."></script>, then follow the examples/documentation to make it draw what you want.


Sorry, that's rubbish. I misread your post. I thought you were asking about one of the utilities for which I posted links. Doh!

I've not used HTML5's canvas yet but I'm sure there's good advice on the web.


Forgive the indentation, something weird happens copying and pasting from notepad++.

Very simple, expanding circles, could be done a lot better, but I think it gives you an idea, I also attempted to get the colours right from your attached picture, which didn't go that well.
Sorry, really didn't see the need for jQuery.

<canvas id="circles"> <p> Sorry no support.</p> </canvas>
(function () {

	var canvas = document.getElementById('circles');
	if ( canvas.getContext ) {
		var strokeColours = ['#584A34', '#828865', '#5B5466', '#52807C', '#B9896D'],
			circles = canvas.getContext('2d');
		for (var i = 0; i < 5; i++ ) {
			var arcRadius = (i === 0) ? 15 : i * 15;
			circles.arc(100, 80, arcRadius, 0, Math.PI * 2, true);
			//Stroke colours set in the array above (in order)
			circles.strokeStyle = strokeColours[i];
			//Fill the first one, in a shade of green.
			if ( i === 0 ) { 
				circles.fillStyle = '#01af50';

Output is attached.

Here is simple javascript fucntion to draw circle. There no efficient algo used here.
But you can implement good and efficient algos.

<!DOCTYPE html>
<html lang="en">
		<meta charset="utf-8" />
			.pixel {
				position: absolute;
				width: 1px;
				height: 1px;
				background: red;
			function circle(x, y, r, c, parent) {
				var body = document.getElementsByTagName("body")[0];
				for(var i = 0; i < 361; i++) {
					var xp = x + Math.cos(i) * r;
					var yp = x + Math.sin(i)*r;
					var p = document.createElement("div");
					p.className = "pixel";
					p.style.left = xp + "px";
					p.style.top = yp + "px";
					if(c) p.style.background = c;
					if(parent) {
					} else {
			function init() {
				circle(100, 100, 50, "green");
				circle(100, 100, 40, "red");
				circle(100, 100, 30, "blue");
				circle(100, 100, 20, "orange");
				circle(100, 100, 10, "black");
	<body onload="init();">

Thank you, I used html5 canvas you can check it on: http://ayyash.info/dxp4.html

I need help to draw small balls and and use drag & drop feature and snap the balls to the borders of the balls.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.