var points = [ {x:120,y:110}, {x:150,y:190}, {x:280,y:150}]; var renderMarker = function(point) { ctx.save(); ctx.translate(point.x, point.y); ctx.rotate(Math.PI/4); ctx.fillRect(-5,-5,10,10); ctx.restore(); }; var renderScannerRing = function(point, radius) { ctx.save(); ctx.translate(point.x, point.y); ctx.beginPath(); ctx.arc(0,0,radius,0,2*Math.PI); ctx.stroke(); ctx.restore(); }; var ctx = document.getElementById('map').getContext('2d'); ctx.fillStyle = ctx.strokeStyle = "rgba(120,256,120,1.0)"; ctx.lineWidth = 5; var i; for(i=0; i<points.length; i++) { renderMarker(points[i]); renderScannerRing(points[i], 75); }
<canvas id="map" width="400" height="300"></canvas>
#map { background: url(http://droneage.com/img/battle/bg/starfield-navy.jpg) }