<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 ----------> <div class="container"> <div class="row"> <h2>Learning the Canvas</h2> <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> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var rectWidth = 150; var rectHeight = 75; context.save(); // save state 1 context.translate(canvas.width / 2, canvas.height / 2); context.save(); // save state 2 context.rotate(Math.PI / 7); context.save(); // save state 3 context.scale(2, 6); context.fillStyle = 'blue'; context.fillRect(rectWidth / -9, rectHeight / -1, rectWidth, rectHeight); context.restore(); // restore state 3 context.fillStyle = 'red'; context.fillRect(rectWidth / -1, rectHeight / -9, rectWidth, rectHeight); context.restore(); // restore state 2 context.fillStyle = 'yellow'; context.fillRect(rectWidth / -5, rectHeight / -5, rectWidth, rectHeight); context.restore(); // restore state 1 context.fillStyle = 'green'; context.fillRect(rectWidth / -8, rectHeight / -7, rectWidth, rectHeight); </script> </div> </div>