• If your images are still to big you can use my snippet to draw moon phases with circle and ellipse.

    /* jshint esversion: 6 */
    
    /* moon.js */
    
    BLACK = 0;
    WHITE = 0xFFFF;
    r = 12;
    x = 120;
    y = 12;
    
    function clear(){g.setColor(BLACK).fillRect(x-r,y-r,x+r,y+r);}
    
    var moon = {
        1: () =>  {
                      clear();
                      g.setColor(WHITE).drawCircle(x,y,r).drawCircle(x,y,r-1);
                  },
        2: () => {
                     moon[3]();
                      //clear();
                      g.setColor(BLACK).fillEllipse(x-r/2,y-r,x+r/2,y+r);
                  },
        3: () => {
                      clear();
                      g.setColor(WHITE).fillCircle(x,y,r).
                      setColor(BLACK).fillRect(x-r,y-r,x,y+r);
                  },
        4: () => {
                      moon[3]();
                      g.setColor(WHITE).fillEllipse(x-r/2,y-r,x+r/2,y+r);
                  },
        5: () =>  {
                     clear();
                     g.setColor(WHITE).fillCircle(x,y,r) ;
                  },
        6: () =>  {  moon[7]();
                     g.setColor(WHITE).fillEllipse(x-r/2,y-r,x+r/2,y+r);
                  },
        7: () => {
                      clear();
                      g.setColor(WHITE).fillCircle(x,y,r).
                      setColor(BLACK).fillRect(x,y-r,x+r+r,y+r);
                  },
        8: () => {
                      moon[7]();
                      g.setColor(BLACK).fillEllipse(x-r/2,y-r,x+r/2,y+r);
                  },
    
    };
    g.clear();
    
    y  = 100;
    x  = 20;  moon[1]();
    x += 30; moon[2]();
    x += 30; moon[3]();
    x += 30; moon[4]();
    x += 30; moon[5]();
    x += 30; moon[6]();
    x += 30; moon[7]();
    x += 30; moon[8]();
    
About

Avatar for MaBe @MaBe started