HTML5 Canvas

You don't support Canvas. If you did, you would see a flag

The HTML Side

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

The CSS Side

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

The JS Side

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();

      }
  }

Browser Graphics

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

Canvas Vs. SVG

canvas

Very basic canvas tutorial

kaleidoscope

WebGL

NOT READY!
  • Chrome 8
  • Safari 5.1
  • Firefox 4
  • Opera 12?
  • IE 10
  • Require hardware

SVG v 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

Using A Canvas

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

Context And Coordinates

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

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

Drawing Shapes

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

Canvas API Basics

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

More Methods

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();

Circles / Arcs

 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();

Shadows

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    } 

Drawing Text

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

Including Images

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);
}
    

Working With Pixels

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);

Transforms

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.

Data Storage

Next ➹