Solved

# HTML - How to draw a 'target'  / concentric circles on a canvas

Posted on 2014-07-20
Medium Priority
737 Views
How can use  JS  to draw a 'target'  (Like the Target icon ) or concentric circles when a  canvas is click on a an specific point?

var ctx = canvas.getContext('2d');
????
0
Question by:JElster
[X]
###### Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

• Help others & share knowledge
• Earn cash & points

LVL 35

Accepted Solution

Robert Schutt earned 2000 total points
ID: 40207638
maybe something like this? http://jsfiddle.net/robert_schutt/8usRk/
``````var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

var C_RADIUS = 20, C_NUM = 3, C_WIDTH = 10;

\$('#canvas').click(function(e){
var offset = \$(this).offset();
ctx.clearRect(0, 0, canvas.width, canvas.height);
var x = e.pageX - offset.left - C_WIDTH / 2;
var y = e.pageY - offset.top - C_WIDTH / 2;
ctx.lineWidth = C_WIDTH;
ctx.strokeStyle = 'black';
ctx.beginPath();
ctx.moveTo(x - C_NUM * C_RADIUS, y);
ctx.lineTo(x + C_NUM * C_RADIUS, y);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y - C_NUM * C_RADIUS);
ctx.lineTo(x, y + C_NUM * C_RADIUS);
ctx.closePath();
ctx.stroke();
ctx.strokeStyle = 'red';
for (var c = 0; c <= C_NUM; c++) {
ctx.beginPath();
ctx.arc(x, y, C_WIDTH / 2 + c * C_RADIUS, 0, 2 * Math.PI, true);
ctx.closePath();
ctx.stroke();
}
});
``````
0

LVL 1

Author Comment

ID: 40207923
thx again!
0

## Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
###### Suggested Courses
Course of the Month11 days, 10 hours left to enroll