Canvas Paths

Canvas Paths
Nikhil
Published on 2021-07-05 08:17:27

Ellipse


Note: Browsers are in the process of adding a built-in context.ellipse drawing command, but this command is not universally adopted (notably not in IE). The methods below work in all browsers.

Draw an ellipse given it's desired top-left coordinate:

// draws an ellipse based on x,y being top-left coordinate
function drawEllipse(x, y, width, height) {
    var PI2 = Math.PI * 2;
    var ratio = height / width;
    var radius = Math.max(width, height) / 2;
    var increment = 1 / radius;
    var cx = x + width / 2;
    var cy = y + height / 2;
    ctx.beginPath();
    var x = cx + radius * Math.cos(0);
    var y = cy - ratio * radius * Math.sin(0);
    ctx.lineTo(x, y);
    for (var radians = increment; radians < PI2; radians += increment) {
        var x = cx + radius * Math.cos(radians);
        var y = cy - ratio * radius * Math.sin(radians);
        ctx.lineTo(x, y);
    }
    ctx.closePath();
    ctx.stroke();
}

 

Draw an ellipse given it's desired center point coordinate:

// draws an ellipse based on cx,cy being ellipse's centerpoint coordinate
function drawEllipse2(cx, cy, width, height) {
    var PI2 = Math.PI * 2;
    var ratio = height / width;
    var radius = Math.max(width, height) / 2;
    var increment = 1 / radius;
    ctx.beginPath();
    var x = cx + radius * Math.cos(0);
    var y = cy - ratio * radius * Math.sin(0);
    ctx.lineTo(x, y);
    for (var radians = increment; radians < PI2; radians += increment) {
        var x = cx + radius * Math.cos(radians);
        var y = cy - ratio * radius * Math.sin(radians);
        ctx.lineTo(x, y);
        ctx.closePath();
        ctx.stroke();
    }

 

Canvas Paths Line without blurriness


When Canvas draws a line it automatically adds anti-aliasing to visually heal "jaggedness". The result is a line that is less jagged but more blurry.

This function draws a line between 2 points without anti-aliasing using Bresenham's_line algorithm. The result is a crisp line without the jaggedness.

Important Note: This pixel-by-pixel method is a much slower drawing method than context.lineTo.

// Usage:
bresenhamLine(50, 50, 250, 250);
// x,y line start
// xx,yy line end
// the pixel at line start and line end are drawn
function bresenhamLine(x, y, xx, yy) {
    var oldFill = ctx.fillStyle; // save old fill style
    ctx.fillStyle = ctx.strokeStyle; // move stroke style to fill
    xx = Math.floor(xx);
    yy = Math.floor(yy);
    x = Math.floor(x);
    y = Math.floor(y);
    // BRENSENHAM
    var dx = Math.abs(xx - x);
    var sx = x < xx ? 1 : -1;
    var dy = -Math.abs(yy - y);
    var sy = y < yy ? 1 : -1;
    var err = dx + dy;
    var errC; // error value
    var end = false;
    var x1 = x;
    var y1 = y;
    while (!end) {
        ctx.fillRect(x1, y1, 1, 1); // draw each pixel as a rect
        if (x1 === xx && y1 === yy) {
            end = true;
        } else {
            errC = 2 * err;
            if (errC >= dy) {
                err += dy;
                x1 += sx;
            }
            if (errC <= dx) {
                err += dx;
                y1 += sy;
            }
        }
    }
    ctx.fillStyle = oldFill; // restore old fill style
}

ATutorialHub Related Guide

Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website