Search code examples
javascriptconstructorprototypal-inheritancebezierobject-literal

bezier curve getting overwritten by using constructor?

I am trying to create 9 hairs(hair=a bezier curve on canvas),but I am doing this with a twist(twist=by using constructor).I am creating 9 such instances,where each instance draws one hair.When I do this,all of them get over written and only the last hair appears instead of all 9 hairs.

HTML CODE:

    <canvas id="myCanvas" width="500" height="500" style="background-color: antiquewhite" ></canvas>

JAVASCRIPT:

(function() {
    hair = function() {
        return this;
    };

    hair.prototype={

     draw_hair:function(a,b,c,d,e,f,g,h){
            var sx  =136+a;
            var sy  =235+b;
            var cp1x=136+c;
            var cp1y=233+d;
            var cp2x=136+e;
            var cp2y=233+f;
            var endx=136+g;
            var endy=200+h;

         var canvas = document.getElementById('myCanvas');
         var context = canvas.getContext('2d');
         context.clearRect(0, 0,500,500);
         context.strokeStyle="grey";
         context.lineWidth="8";
         context.beginPath();
         context.moveTo(sx,sy);
         context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,endx,endy);
         context.lineCap = 'round';
         context.stroke();
         context.restore();
         context.save();
    }
};
})();

function init(){
  hd1 = new hair();
  hd1.draw_hair(0,0,0,0,0,0,0,0);

    hd2 = new hair();
    hd2.draw_hair(146,0,146,0,146,0,146,0);

    hd3 = new hair();
    hd3.draw_hair(156,0,156,0,156,0,156,0);

    hd4 = new hair();
    hd4.draw_hair(166,0,166,0,166,0,166,0);

    hd5 = new hair();
    hd5.draw_hair(176,0,176,0,176,0,176,0);

    hd6 = new hair();
    hd6.draw_hair(186,0,186,0,186,0,186,0);

    hd7= new hair();
    hd7.draw_hair(196,0,196,0,196,0,196,0);

    hd8 = new hair();
    hd8.draw_hair(206,0,206,0,206,0,206,0);

    hd9 = new hair();
    hd9.draw_hair(216,0,216,0,216,0,216,0);
 }

//init() is called on load
Solution

  • each hair contructor has the

    context.clearRect(0, 0,500,500);

    which will clear all the pixels in the region and thus previously drawn hair. Move that out of your hair constructor!

    hope this helps

    K