<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>Test Canvas</h2> <canvas id="myCanvas" width="578" height="500"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // do cool things with the context context.font = '40pt Arial'; context.fillStyle = 'blue'; context.fillText('Hello World!', 150, 100); </script> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(100, 150); context.lineTo(500, 150); context.lineWidth = 30; context.stroke(); </script> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var imageObj = new Image(); imageObj.onload = function() { context.drawImage(imageObj, 69, 50); }; imageObj.src = 'http://i.telegraph.co.uk/multimedia/archive/01523/galloway620_1523750i.jpg'; </script> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var my_gradient = ctx.createLinearGradient(0, 0, 0, 170); my_gradient.addColorStop(0, "black"); my_gradient.addColorStop(1, "white"); ctx.fillStyle = my_gradient; ctx.fillRect(20, 20, 150, 100); </script> </div> </div>

body { margin: 0px; padding: 0px; } body { background-color: #9966FF; }