<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <canvas id="myCanvas" width="1200" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // do cool things with the context context.font = '50pt Impact'; context.fillStyle = 'Red'; context.fillText('Hello Mr.Rob Mccormack!', 150, 200); </script> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // translate context to center of canvas context.translate(canvas.width / 2, canvas.height / 2); // flip context horizontally context.scale(-1, 1); context.font = '30pt Calibri'; context.textAlign = 'center'; context.fillStyle = 'blue'; context.fillText('Hello World!', 0, 0); </script>

body { margin: 0px; padding: 0px; }