"Canvas Test"
Bootstrap 3.3.0 Snippet by N8BIZ

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
.contanter{
display: flex;
align-items: center;
}
#canvas{
height: 400px;
width: 600px;
border: 4px solid black;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(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);
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit Pro

Questions / Comments: