HTML Canvas - Dotted stroke around circle

Question

I do know there is no native support for doing dotted stroke lines rendered on a canvas, but I have seen the clever ways people have been able to generate support for this.

What I am wondering is if there is any way to translate this to allow for rendering dotted strokes around shapes (specifically circles)?

Answer 1

Live Demo

calcPointsCirc takes 4 arguments, the center x/y, the radius, and the length of the dashes. It returns an array of points, x,y,ex,ey. You can just loop through the points to draw the dashed circle. There's probably much more elegant ways to do this but figured Id give it a shot.

function calcPointsCirc( cx,cy, rad, dashLength)
{
    var n = rad/dashLength,
        alpha = Math.PI * 2 / n,
        pointObj = {},
        points = [],
        i = -1;

    while( i < n )
    {
        var theta = alpha * i,
            theta2 = alpha * (i+1);

        points.push({x : (Math.cos(theta) * rad) + cx, y : (Math.sin(theta) * rad) + cy, ex : (Math.cos(theta2) * rad) + cx, ey : (Math.sin(theta2) * rad) + cy});
        i+=2;
    }              
    return points;            
} 


var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

canvas.width = canvas.height= 200;

var pointArray= calcPointsCirc(50,50,50, 1);
    ctx.strokeStyle = "rgb(255,0,0)";
    ctx.beginPath();

    for(p = 0; p < pointArray.length; p++){
        ctx.moveTo(pointArray[p].x, pointArray[p].y);
        ctx.lineTo(pointArray[p].ex, pointArray[p].ey);
        ctx.stroke();
    }

    ctx.closePath();

Answer 2

the simplest way using context.setLineDash()

ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.beginPath();
ctx.arc(100, 60, 50, 0, Math.PI * 2);
ctx.closePath();
ctx.stroke();

Answer 3

If all else fails you can always loop a variable from 0 to 2*pi, skipping every step items and drawing on every other step items points at sin(angle)*radius+centerx, cos(angle)*radius+centery.

There you go, home-made dotted circle :)

Answer 4

My JavaScript Path library implements dashed and dotted drawing of arbitrary paths (which can be composed of any number of straight or curved segments), including ellipses. Download it and check out the examples.

Answer 5

I was looking for a dashed-circle for my game and after reading all of the pages I have written a class in typescript it works very well. If anybody looks for the dashed-circle in typescript, it is here;

export class DashedCircle
{
    centerX: number;
    centerY: number;
    radius: number;
    color: string;
    dashSize: number;
    ctx: CanvasRenderingContext2D;

    constructor(ctx:CanvasRenderingContext2D, centerX: number, centerY: number, radius: number, color: string, dashSize: number)
    {
        this.ctx = ctx;
        this.centerX = centerX;
        this.centerY = centerY;
        this.radius = radius;
        this.color = color;
        this.dashSize = dashSize;
    }

    CalculateCirclePoints()
    {
        var n = this.radius / this.dashSize;
        var alpha = Math.PI * 2 / n;
        var pointObj = {};
        var points = [];
        var i = -1;

        while (i < n)
        {
            var theta = alpha * i;
            var theta2 = alpha * (i + 1);
            points.push({
                x: (Math.cos(theta) * this.radius) + this.centerX,
                y: (Math.sin(theta) * this.radius) + this.centerY,
                ex: (Math.cos(theta2) * this.radius) + this.centerX,
                ey: (Math.sin(theta2) * this.radius) + this.centerY });
                i += 2;
        }

        return points;
    }

    Draw()
    {
        var points = this.CalculateCirclePoints();
        this.ctx.strokeStyle = this.color;
        this.ctx.beginPath();
        for (var p = 0; p < points.length; p++)
        {
            this.ctx.moveTo(points[p].x, points[p].y);
            this.ctx.lineTo(points[p].ex, points[p].ey);
            this.ctx.stroke();
        }
        this.ctx.closePath();
    }
}