"TEST: Canvas"
Bootstrap 3.3.0 Snippet by mrmccormack

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="span1">
<div id="tools-area" class="btn-group btn-group-vertical" data-toggle="buttons-radio">
<button title="move" data-placement="right" type="button" class="btn active" value="move">
<i class="icon-move"></i>
</button>
<button title="pencil" data-placement="right" type="button" class="btn" value="pencil">
<i class="icon-pencil"></i>
</button>
<button title="rectangle" data-placement="right" type="button" class="btn" value="rect">
<i class="icon-stop"></i>
</button>
</div>
</div>
<div class="span10">
<div id="canvas-area">
<canvas id="background-canvas"><div>canvas is not supported.</div></canvas>
<canvas id="user-canvas"></canvas>
<canvas id="foreground-canvas"></canvas>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
body {
padding-top: 60px;
}
canvas {
position: absolute;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// https://gist.github.com/shinaisan/6163379
var configurations = {
canvasWidth: 500,
canvasHeight: 500,
color: "#48c"
};
var tools = {
selection: function() {
var v = $("#tools-area .active").val();
return tools[v];
},
move: (function() {
var imageData = null;
return {
onDrag: function(from, to) {
var w = canvases.user.canvas.width;
var h = canvases.user.canvas.height;
if (imageData == null) {
imageData = canvases.user.getImageData(0, 0, w, h);
}
var dx = to.x - from.x;
var dy = to.y - from.y;
canvases.user.clearRect(0, 0, w, h);
canvases.user.putImageData(imageData, dx, dy);
},
onDragEnd: function(from, to) {
imageData = null;
}
};
})(),
pencil: (function() {
var prevPos = null;
return {
onDrag: function(from, to) {
var c = canvases.user;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Black Dashboard React

Questions / Comments: