"Canvas Test"
Bootstrap 3.3.0 Snippet by N8BIZ

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> <head> <meta charset="utf-8"> <title>Canvas Page</title> </head> <body> <header>Genric Header (CreArtivity)</header> <div class="container"> <div class="row"> <h2 class="helloJosh" style="display:none">Create your own custom art to blend with your photo</h2> <canvas id="canvas"></canvas> </div> <a href="#" class="btn btn-lg btn-primary">Save Art <span class="glyphicon glyphicon-floppy-save"></span></a> <a href="#" class="btn btn-lg btn-primary">CreArt <span class="glyphicon glyphicon-wrench"></span></a> </div> <footer>Genric Foot (CreArtivity</footer> </body>
.contanter{ display: flex; align-items: center; } #canvas{ height: 400px; width: 600px; border: 4px solid black; }
$(window).load( function draw(){ var canvas = document.getElementById('canvas'); $('.helloJosh').fadeIn("normal") if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillStyle = 'rgb(200, 0, 0)'; ctx.fillRect(10, 10, 50, 50); ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'; ctx.fillRect(30, 30, 50, 50); } });

Related: See More

Vue Material Kit

Questions / Comments: