<h1>Adding dynamic text to a responsive image (sort of)</h1>

<p>A codepen demo to go along wiht the blogpost: <br /><a href="http://blog.colouringcode.com/adding-dynamic-text-to-a-responsive-image-sort-of/">blog.colouringcode.com/adding-dynamic-text-to-a-responsive-image-sort-of</a></p>

<canvas id="canvas" width="800" height="600"></canvas>
$body: #eee;

* {
  margin: 0;
  padding: 0;
  
  text-align: center;
}

body {
  background: $body;
  
  padding: {
    top: 80px;
  }
  
  text-align: center;
  line-height: 1.4;
}

h1 {
  font: {
    family: arial;
    size: 36px;
    weight: normal;
  }
  margin: {
    bottom: 20px;
  }
}

p {
  max-width: 800px;
  
  font: {
    family: arial;
    size: 16px;
    weight: normal;
  }
  
  color: #666;
  
  margin: 0 auto 80px;
  
  a {
    color: #555;
    text-decoration: none;
  }
}

#canvas { 
  width: 100%;
  max-width: 800px;  
  height: auto;
  
  margin: 0 auto;
}
document.addEventListener('DOMContentLoaded', function(event) { 
  // First we create a variable that grabs the canvas by it's ID
  var theCanvas = document.getElementById('canvas');

  // Then we use the getContext() method to return a drawing context on the canvas, in this case 2D
  var theContext = theCanvas.getContext('2d');

  // Now we create an image variable
  var theImg = new Image();

  // We use the onload function so that we only begin to add content to the stage once the image has loaded
  theImg.onload = function() {
    // Let's set up the image
    theContext.drawImage(theImg, 0, 0, 800, 600);
	// Setting up the font styling
	theContext.font = 'normal 60px Arial';
    theContext.fillStyle = '#ffffff';
    // To add the text to the Canvas we first define the text, then set it's position using X and Y parameters.
    theContext.fillText('Hello world!', 50, 550);
  };

  theImg.src = 'http://hqwallpaperz.mobi/wp-content/uploads/cloudy-field-2.jpg';
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.