Learning Canvas

by Farzad Cyrus

HTML

<canvas id="canvas" width="1024px" height="768px"></canvas>

JavaScript

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

        ctx.beginPath();
        ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
        ctx.moveTo(110,75);
        ctx.arc(75,75,35,0,Math.PI,false);  // Mouth (clockwise)
        ctx.moveTo(65,65);
        ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
        ctx.moveTo(95,65);
        
        ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
        ctx.stroke();
        ctx.closePath();
        
        /*
        ctx.beginPath();
        ctx.moveTo(200,200);
        ctx.lineTo(120,60);
        ctx.lineTo(320,200);
        ctx.fill();
        ctx.closePath();
        */
        
        function drawRectangle (canvas, x, y, width, height, colour) {
          if (canvas) {
          	var rectangle = new Path2D();
        		rectangle.rect(x, y, width, height);
          	
          	ctx.fillStyle = colour;
        		ctx.fill(rectangle);
          }
        }
        
        
        var rectangle = drawRectangle(ctx, 10, 40, 120, 120, '#d13');
        
        
        
/*
        var circle = new Path2D();
        circle.moveTo(125, 35);
        circle.arc(100, 35, 25, 0, 2 * Math.PI);
        
        var triangle = new Path2D();
        triangle.moveTo(200, 200);
        triangle.lineTo(120, 60);
        triangle.lineTo(320, 200);
        
        ctx.fillStyle = '#9900cc';
        ctx.fill(triangle);
        

				ctx.fillStyle = '#333350';
        ctx.fill(rectangle);


        ctx.fillStyle = '#dd1133';
        ctx.fill(circle);
    
      */  
        
        
      }
    }
    
    
    draw();