"HTML5 Canvas + 2 Features"
Bootstrap 3.3.0 Snippet by shyseraph

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE HTML> <html> <head> <title>Here is some HTML5 Canvas stuff :)</title> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.rect(0, 0, canvas.width, canvas.height); // add linear gradient var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height); // light blue grd.addColorStop(0, '#8ED6FF'); // dark blue grd.addColorStop(1, '#004CB3'); context.fillStyle = grd; context.fill(); var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 70; context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = 'yellow'; context.fill(); context.lineWidth = 1; context.strokeStyle = '#003300'; context.stroke(); var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // do cool things with the context context.font = '40pt Calibri'; context.fillStyle = 'black'; context.fillText('Good Morning World!', 50, 100); </script> </body> </html>
body { margin: 0px; padding: 0px; }

Related: See More

Vue Light Bootstrap Dashboard
Resonsive Features Comparison table without JS

Questions / Comments: