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

if (Modernizr.canvas) {

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

  var img = new Image();
  img.onload = function() {
      context.drawImage(img, 0, 0);
  }
  img.src = "img/home.jpg";

  // un comment to scale the chart
  //context.scale(.5, .5); // 0.5 orig. size
  //context.scale(2, 2); // 2x orig. size

  // arguments do not need to be equal
  //context.scale(.25,.5); 
}

var degreesToRadians = function(degrees) {
  var radians = (degrees * (Math.PI / 180));
  return radians;
}

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

if (Modernizr.canvas) {

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

  var img = new Image();
  img.onload = function() {
      context.drawImage(img, 0, 0);
      
  }
  img.src = 'img/home.jpg';

  //context.rotate(0.2);

  context.rotate(degreesToRadians(-15));
}

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

if (Modernizr.canvas) {

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

    //* uncomment to move the base coordinates
    context.translate(50, 50);
    //*/

    var
        text,
        img = new Image();

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

        context.fillStyle = '#ffffff';
        context.strokeStyle = '#000000';
        context.lineWidth = 6;

        text = 'Beautiful Homes';
        context.font = '3em Arial';
        context.strokeText(text, 100, 55);
        context.fillText(text, 100, 55);

        text = 'In Your Area';
        context.font = '2em Arial';
        context.strokeText(text, 175, 320);
        context.fillText(text, 175, 320);
    }
    img.src = 'img/home.jpg';  
}

var
  x = 0,
  y = 0,
  frame,
  canvas = document.getElementById('canvas'),
  context = canvas.getContext('2d');

var draw = function() {

  if (x <= canvas.width) {
      context.clearRect(0, 0, 345, 345);
      context.strokeStyle = 'rgb(139, 0, 0)';
      context.lineWidth = 8;
      context.beginPath();
      context.moveTo(0, 0);
      context.lineTo(x += 10, y += 10);
      context.stroke();
  }
  else {
      clearInterval(frame);
      console.log('Animation Complete');
  }
}

if (Modernizr.canvas) {
  frame = setInterval(function() {
      draw();
  }, 25);
}