html5-canvas
पथ

अंडाकार

नोट: ब्राउजर एक अंतर्निहित context.ellipse जोड़ने की प्रक्रिया में हैं। ड्राइंग कमांड context.ellipse , लेकिन यह कमांड सार्वभौमिक रूप से नहीं अपनाया जाता है (विशेष रूप से IE में नहीं)। नीचे दिए गए तरीके सभी ब्राउज़रों में काम करते हैं।

वांछित शीर्ष-बाएँ समन्वय को देखते हुए एक दीर्घवृत्त बनाएँ:

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

वांछित केंद्र बिंदु समन्वय को देखते हुए एक दीर्घवृत्त बनाएं:

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

बिना धुंधलापन के रेखा

जब कैनवस एक रेखा खींचता है तो यह स्वचालित रूप से "दांतेदारपन" को ठीक करने के लिए एंटी-अलियासिंग जोड़ता है। परिणाम एक रेखा है जो कम दांतेदार है लेकिन अधिक धुंधली है।

यह फ़ंक्शन ब्रेशेनहैम_लाइन एल्गोरिथ्म का उपयोग करते हुए एंटी-अलियासिंग के बिना 2 बिंदुओं के बीच एक रेखा खींचता है। परिणाम दांतेदार के बिना एक कुरकुरा रेखा है।

महत्वपूर्ण नोट: यह पिक्सेल-बाय-पिक्सेल विधि 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
}