<canvas id="flag" width="320" height="220">
  You don't support Canvas. If you did, you would see a flag
</canvas>

#flag {
      width: 320px; 
      height: 220px;
      margin: auto;
      }

var el= document.getElementById("flag");

  if (el && el.getContext) { 
  var context = el.getContext('2d');
      if(context){
          context.fillStyle   = "#ffffff"; 
          context.strokeStyle = "#CCCCCC"; 
          context.lineWidth   = 5;
          context.shadowOffsetX = 5;
          context.shadowOffsetY = 5;
          context.shadowBlur    = 4;
          context.shadowColor   = 'rgba(0, 0, 0, 0.4)';
          context.strokeRect(10, 10, 300, 200);
          context.fillRect(10, 10, 300, 200);
          context.shadowColor='rgba(0,0,0,0)';
          context.fillStyle = "#d60818";
          context.arc(160, 107, 60, 0, Math.PI*2, false);
          context.fill();

      }
  }

• JPEG
• GIF
• Animated GIF
• PNG
• Plugins (Flash)
• VML
• SVG
• Canvas

• SVG can be made accessible, canvas can not
• SVG paints DOM elements. Canvas paints pixels
• SVG can drain memory b/c of DOM usage
• Canvas can drain CPU because of JS usage
• Canvas be saved as an image. SVG can be an image
• SVG scales better

<canvas id="flag" width="320" height="220">
  You don't support Canvas. If you did, you would see a flag
</canvas>

var el= document.getElementById("flag");

  if (el && el.getContext) { 
  var context = el.getContext('2d');
      if(context){
       /* draw here */
      }
  }

Rectangle is the only shape!

context.fillStyle   = "#ffffff";
context.fillRect(10, 10, 300, 200);

you can border that rectangle

context.fillStyle   = "#ffffff"; 
context.strokeStyle = "#CCCCCC"; 
context.lineWidth   = 5;
context.strokeRect(10, 10, 300, 200);
context.fillRect(10, 10, 300, 200);

Note: only 50% of border will show

Drawing straight lines

moveTo(x,y)

Move to x / y without drawing.

lineTo(x,y)

Move to x / y while drawing

Appearance of line / shapes

fillStyle

CSS background color

strokeStyle

CSS border color

beginPath()

Start a new path

closePath()

Close the current path

stroke()

Stroke the path

fill()

Fill the path

context.beginPath();
context.moveTo(50,150);
context.lineTo(100,100);
context.lineTo(150,150);
context.lineTo(200,100);
context.lineTo(250,150);
context.stroke();

 arc(x, y, radius, startAngle, endAngle, clockwise);

x, y

center of the circle/arc coordinates (in pixels)

radius

radius of your circle/arc (in pixels)

startAngle

Starting angle of the circle/arc (in radians)

endAngle

Ending angle of the circle/arc (in radians)

clockwise

Draw clockwise or counterclockwise (true or false)

context.fillStyle = "#d60818";
context.arc(160, 107, 60, 0, Math.PI*2, false);
context.fill();

1 if(context){
2           context.fillStyle   = "#ffffff"; 
3           context.strokeStyle = "#CCCCCC"; 
4           context.lineWidth   = 5;
5           context.shadowOffsetX = 5;
6           context.shadowOffsetY = 5;
7           context.shadowBlur    = 4;
8           context.shadowColor   = 'rgba(0, 0, 0, 0.4)';
9           context.strokeRect(10, 10, 300, 200);
10          context.fillRect(10, 10, 300, 200);
11          context.shadowColor='rgba(0,0,0,0)';
12          context.fillStyle = "#d60818";
13          context.arc(160, 107, 60, 0, Math.PI*2, false);
14          context.fill();
15    } 

context.shadowColor   = 'rgba(255, 0, 0, 1)'
context.fillStyle   = "#000000"; 
context.textAlign="center"; 
context.font="italic 20px verdana"; 
context.fillText("Japanese Flag", 150, 150);

drawImage(image, dx, dy)

draws the 'image' starting at coordinates (dx,dy) in actual size

drawImage(image, dx, dy, dw, dh)

Same as drawImage above but to specified size

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

Draws selected region of image starting at sx/sy with width sw and a height sh. Starts drawing at the dx/dy coordinates with size defined by dw / dh.

var image=new Image();
image.src="myImage.png";
image.onload=function() {
	context.drawImage(image, 140, 0, 206, 183, 0, 0, 206, 183);
}
    

It is possible to get pixel data from canvas

//draw image
context.drawImage(image,0,0);

//get data from the canvas
var pixels=context.getImageData(0, 0, el.width, el.height);

// loop thru each pixel's 4 colors (length/4)
for (var i = 0, n = pixels.data.length; i < n; i += 4){
	//red
	pixels.data[i+0] = 0; 
    //green
	pixels.data[i+1] = 255 - pixels.data[i+1];
    //blue 
	pixels.data[i+2] = 0;
    // alpha transparency not altered. 
}
//draw the image with new pixels
context.putImageData(pixels,0,0);

translate(x,y)

moves the canvas and its origin to new coordinates

restore()

moves it back to previous saved state

save()

saves if there are any current transforms

rotate(angle)

Rotats angle radians, such as context.rotate(Math.PI/4)

scale(x, y)

Scales it to x times the width and y times the height.

• Easy: Play with the Flag
• Hard: Make a drawing application
• Lost? Easy Tutorial