CODEWITHSUNDEEP
htmlcanvasrenderingdotted-line
Chris
Chris

Reputation: 1131

HTML Canvas - Dotted stroke around circle

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)?

Upvotes: 10

Views: 13245

Answers (5)

user8003769
user8003769

Reputation:

the simplest way using context.setLineDash()

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

Upvotes: 17

Erdi İzgi
Erdi İzgi

Reputation: 1322

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();
    }
}

Upvotes: 1

ryandesign
ryandesign

Reputation: 1144

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.

Upvotes: 2

Loktar
Loktar

Reputation: 35319

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();

Upvotes: 9

Blindy
Blindy

Reputation: 67544

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 :)

Upvotes: 4

Related Questions