http://jsfiddle.net/a7ZSG/10/ check out the link to the jsfiddle for more information.
Having trouble getting a red rectangle to appear in a green canvas? Can anyone figure out why it's not showing up? I've attempted using window.onload around all the canvas-related code but no luck so far.
html:
<!doctype html>
<html lang="en" ;>
<head>
<meta charset="utf-8" />
<title>CustomCase</title>
<link rel="stylesheet" href="HeaderFooter.css">
<link rel="stylesheet" href="SkapaDesign.css">
<script src="Jquery.js"></script>
<script src="Fabric.js"></script>
<script src="Canvas.js"></script>
</head>
<body>
<div id="Wrapper">
<section id="Body">
<img id="UpperShadow" src=NeråtSkugga.png>
<div id="LeftColumn">
<div id="TextMode"></div>
<div id="CanvasContainer">
<canvas id="Canvas"></canvas>
</div>
<div id="LayerMode"></div>
<div id="IPhoneMode"></div>
</div>
<div id="RightColumn">
<div id="TextureMode"></div>
<div id="TextureFilter"></div>
<div id="TextureView">
<div id="TextureViewInside">
<div id="images">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
</div>
</div>
</div>
</div>
<img id="LowerShadow" src=UppåtSkugga.png>
</section>
</div>
</body>
</html>
css:
#Body {
height: 675px;
}
/*--------------------------------Body--------------------------------*/
#TextMode, #TextureMode, #CanvasContainer, #Canvas, #LayerMode, #TextureFilter, #TextureView, #IPhoneMode {
float: left;
}
/*------------------------------Columns------------------------------*/
#LeftColumn {
float: left;
width: 355px;
margin: 20px 30px 0px 0px;
}
#RightColumn {
float: left;
width: 600px;
margin-top: 20px;
}
/*----------------------------Left Column----------------------------*/
#TextMode {
width: 340px;
height: 40px;
margin-left: 15px;
background: #848484;
}
#CanvasContainer {
width: 270px;
height: 519px;
margin-left: 15px;
background: black;
}
#Canvas {
overflow: hidden;
background: green;
width: 270px;
height: 519px;
}
#LayerMode {
width: 70px;
height: 519px;
background: #848484;
}
#IPhoneMode {
width: 340px;
height: 40px;
margin-left: 15px;
background: #848484;
}
/*----------------------------Right Column---------------------------*/
#TextureMode {
width: 600px;
height: 40px;
background: #848484;
}
#TextureFilter {
width: 130px;
height: 559px;
background: #848484;
}
#TextureView {
width: 470px;
height: 559px;
overflow: auto;
}
#TextureViewInside {
padding: 10px;
}
#images img {
width: 97px;
display: inline-block;
vertical-align: top;
padding: 4px;
}
Javascript:
$(document).ready(function () {
$("#images img").click(function () {
var getsource = $(this).attr("src");
alert(getsource);
});
});
var canvas = new fabric.Canvas('Canvas');
var rect = new fabric.Rect({
fill: 'red',
width: 20,
height: 20,
angle: 45
});
canvas.add(rect);