Canvas tutorial

(function() {
  const canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    const ctx = canvas.getContext("2d");

ctx.reset();
    ctx.fillStyle = "rgb(0 0 0)";

const pset = function(x,y) {
      ctx.fillRect(100-x,100-y,1,1);
      ctx.fillRect(100-x,100+y,1,1);
      ctx.fillRect(100+x,100-y,1,1);
      ctx.fillRect(100+x,100+y,1,1);
    }

const circle = function(r) {
      let t=r/2,x=r,y=0;
      while(x>=0) {
        pset(x,y);
        if(t>=0) { ++y; t-=y; }
        if(t<0) { --x; t+=x; }
      }
    }

const ellipse = function(rx,ry) {
      if(rx>ry)
        ellibase(rx,ry,0);
      else
        ellibase(ry,rx,1);
    }

circle(1);
    circle(10);
    circle(50);
    circle(90);

//ellipse(90,50);
    //ellipse(50,90);
    //for(let x=40; x<90; x+=5) ellipse(x,40);
    //for(let y=40; y<90; y+=5) ellipse(40,y);

}
})();