Canvas Images and CSS3 Buttons

Sep 20, 2010
Episode 37
We're back! Jim shows you how to add images to your canvas and Nick deconstructs a CSS3 button library.
Spotlight

Images in Canvas

You can draw images onto the canvas using the drawImage() function. The following examples show you hw to use this function.

You can view the live demo here or download the code.

Basic Setup
function draw(){
  var canvas = document.getElementById('c'),
      ctx = canvas.getContext('2d'),
      image = document.getElementById('i');

  var fn = draw_example_1;

  if(fn && ctx){
    ctx.fillStyle= "#CCCCCC"
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
    fn(ctx, image)
  }
}
Basic Drawing
function draw_example_1(ctx, image){
  // Draw full image at (0, 0)
  ctx.drawImage(image, 0, 0)
}
Positioning
function draw_example_2(ctx, image){
  // Draw full image at (50, 100)
  ctx.drawImage(image, 50, 100)
}
Positioning and Scaling
function draw_example_3(ctx, image){
  // Draw image at (50, 100), scaled to fit in 400x100
  ctx.drawImage(image, 50, 100, 400, 100)
}
Cropping
function draw_example_4(ctx, image){
  // Draw the portion of the image at (150, 80) 100x130
  // onto the canvas at (0, 0) scaled to 100x130
  ctx.drawImage(image, 
    150, 80, 100, 130,
    0, 0, 100, 130)
}
Cropping, Positioning, and Scaling
function draw_example_5(ctx, image){
  // Draw the portion of the image at (150, 80) 100x130
  // onto the canvas at (0, 0) scaled to 300x390
  ctx.drawImage(image, 
    150, 80, 100, 130,
    120, 5, 300, 390)
}
Compositing and Programatic Image Creation
function draw_example_6(ctx, image){
  var cow = document.createElement("IMG")
  cow.onload = function(){
    // Draw full barn image at (0, 0)
    ctx.drawImage(image, 0, 0)

    ctx.drawImage(cow, 220, 180, 240, 150)
  }
  cow.src = "cow.png"
}

Doctype Deconstruct: BonBon Buttons

The BonBon Button library was created using CSS3. Here’s the link:

http://lab.simurai.com/css/buttons/

BonBon allows you to create buttons really easily and flexibly. To create a button, you just have to include the BonBon CSS file in your markup, add the “button” class, and add any of the numerous additional classes that BonBon offers.

The question is, how exactly is BonBon making use of CSS3?

Border Radius

By using border radius, BonBon is able to make all the buttons have rounded corners. Not just that, but by using individual border-radii on each corner, the buttons can be morphed into various shapes.

Gradients

All the buttons use gradients to give them some nice color and variation. In addition to that, gradients can be layered on top of the base colors to create glossy, glass effects. And finally, multiple backgrounds are used to add a noise.png image to the gradient. This way, instead of being flat color, the gradient has some texture.

Transitions

To create the glowing hover state on the buttons, CSS3 transitions were used. This allows for smooth fading between the normal state and the hover state. There’s also a special shape called “morph” that causes a button to smoothly animate a change in shape. BonBon accomplishes this by creating two states for the border-radius of a button and transitioning between them.

Download