var canvas = document.getElementById('canvas');
var context = null;

if (Modernizr.canvas) {

  context = canvas.getContext('2d');

  context.beginPath();
  context.arc(
      135,
      120,
      120,
      0,
      Math.PI * 2,
      true);
  context.clip();

  var img = new Image();
  img.onload = function() {
      context.drawImage(img, 0, 0);

      context.lineWidth = 15;
      context.strokeStyle = '#cccccc';
      context.stroke();
  }
  img.src = 'img/home.jpg';
}

var
    canvas = document.getElementById('canvas'),
    context = null,
    x = 40,
    y = 25,
    width = height = 200;

if (Modernizr.canvas) {

    context = canvas.getContext('2d');

    context.beginPath();
    context.rect(x, y, width, height);
    context.clip();

    var img = new Image();
    img.onload = function() {
        context.drawImage(img, 0, 0);
        context.lineWidth = 15;
        context.strokeStyle = '#cccccc';
        context.strokeRect(x, y, width, height);
    }
    img.src = 'img/home.jpg';
}

var canvas = document.getElementById('canvas');
var  context = null,
  x = 40,
  y = 25,
  width = height = 200;

if (Modernizr.canvas) {

  context = canvas.getContext('2d');

  context.beginPath();
  context.rect(x, y, width, height);
  context.clip();

  var img = new Image();
  img.onload = function() {
      context.drawImage(img, 0, 0);
      context.lineWidth = 15;
      context.strokeStyle = '#cccccc';
      context.strokeRect(x, y, width, height);

      context.fillStyle =
              'rgba(153, 153, 153, 0.75)';
       context.fillRect(0, 0, 100, 100);
  }
  img.src = 'img/home.jpg';
}

var
    canvas = document.getElementById('canvas'),
    width = canvas.width,
    height = canvas.height,
    context = null;

if (Modernizr.canvas) {

    context = canvas.getContext('2d');

    context.fillStyle =
        'rgba(153, 153, 153, 0.75)';

    context.strokeStyle = '#999999';
    context.lineWidth = 5;
    context.lineCap = 'round';

    context.save();

    context.beginPath();
    context.moveTo(105, 105);
    context.lineTo(200, 100);
    context.lineTo(250, 300);
    context.lineTo(300, 0);
    context.closePath();
    context.stroke();
    context.clip();

    context.fillRect(0, 0, 215, 215);

    //you can't reset the clip like this...
    //context.rect(0, 0, width, height);
    //context.clip();

    context.restore();

    context.fillRect(200, 200, 50, 50);
}

var
  canvas = document.getElementById('canvas'),
  context = null;

if (Modernizr.canvas) {

  context = canvas.getContext('2d');

  context.fillStyle =
      'rgba(153, 153, 153, 0.75)';

  context.strokeStyle = '#999';
  context.lineWidth = 5;
  context.lineCap = 'round';
    
  context.save();

  context.rect(0, 0, 100, 100);
  context.rect(105, 0, 100, 100);
  context.clip();
  context.stroke();

  context.fillRect(0, 0, 300, 300);

  context.restore();

  context.fillRect(0, 105, 100, 100);
}

var
  canvas = document.getElementById('canvas'),
  img = new Image(),
  context = null,
  dataUrl = null,
  isMagnified = false,

  init = function() {
      img.onload = function() {
          context.drawImage(img, 0, 0);
          dataUrl = canvas.toDataURL();
      }
      img.src = 'img/home.jpg';
      isMagnified = false;
  },
    
  magnify = function() {
      context.save();
      context.lineWidth = 10;
      context.shadowColor = '#000';
      context.shadowBlur = 15;
      context.shadowOffsetX = 5;
      context.shadowOffsetY = 5;

      context.save();
      context.beginPath();
      context.moveTo(230, 230);

      context.lineCap = 'round';
      context.lineWidth = 30;
      context.lineTo(285, 285);
      context.stroke();

      context.beginPath();

      context.arc(
                  150,
                  150,
                  115,
                  0,
                  Math.PI * 2,
                  true);

      context.clip();

      var magnified = new Image();
      magnified.src = dataUrl;

      context.scale(1.5, 1.5);
      context.drawImage(img, -40, -40);

      context.restore();

      context.arc(
                  150,
                  150,
                  115,
                  0,
                  Math.PI * 2,
                  true);
      context.stroke();
      context.restore();

      isMagnified = true;
  };

if (Modernizr.canvas) {

  context = canvas.getContext('2d');

  init();
    
  $('canvas').click(function() {
      if (isMagnified) {
          init();
      }
      else {
          magnify();
      }
  });
}