CODEWITHSUNDEEP
javascripthtmlalgorithmgoogle-chromecanvas
Thomas Wagenaar
Thomas Wagenaar

Reputation: 6769

What antialiased line drawing algorithm is used by Chrome?

I'm importing a lot of raw drawing data (strokes) and converting it to images. I used the basic HTML5 Canvas until now, which worked fine. But I wanted to implement the line drawing algorithm myself, as it saves a lot of hassle.

So I implemented Xiaolin Wu's line algorithm, but when i compare it to my previous results with Canvas it didn't really look good:

Left 5 columns: Xiaolin Wu's line algorithm, Right 5 columns: HTML5 Canvas (latest version Chrome) algorithm

So what algorithm are they using? Is source code available? All I need is the algorithm of drawing single lines.

Upvotes: 0

Views: 490

Answers (1)

aloisdg
aloisdg

Reputation: 23531

Google Chrome is powered by Chromium which is Open Source.

The main Chromium project is located at https://www.chromium.org/.

The source code is available at https://chromium.googlesource.com/.

Next step is to browse a bit. They are using the library Skia to draw which is also Open Source. You can use it in your project and you should be good.

Demo:

void draw(SkCanvas* canvas) {
    canvas->drawColor(SK_ColorWHITE);

    SkPaint paint;
    paint.setStyle(SkPaint::kStroke_Style);
    paint.setStrokeWidth(8);
    paint.setColor(0xff1f78b4);
    paint.setAntiAlias(true);
    paint.setStrokeCap(SkPaint::kRound_Cap);

    SkPath path;
    path.moveTo(10, 10);
    path.quadTo(256, 64, 128, 128);
    path.quadTo(10, 192, 250, 250);
    canvas->drawPath(path, paint);
}

demo

Upvotes: 1

Related Questions