I'm making a webpage and after tweaking some code my image on the website doesn't show anymore but i have errors in the console here is the code please someone help ive tried a few things to no luck so this my last resort
<!DOCTYPE HTML>
<html>
<head>
<link rel="StyleSheet" type="text/css" href="StyleSheet.css">
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<script src="kinetic-v5.1.0.min.js" type="text/javascript"></script>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="jquery.mousewheel.min.js" type="text/javascript"></script>
<link href="easy-sidebar.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-inverse easy-sidebar" style="z-index: 99999; position: absolute;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle easy-sidebar-toggle" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav">
<aside>
<ul class="nav nav-tabs">
<li><a href="#one" aria-controls="one" role="tab" data-toggle="tab">One</a>
</li>
<li><a href="#two" aria-controls="two" role="tab" data-toggle="tab">Two</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="one"></div>
<div role="tabpanel" class="tab-pane" id="two"></div>
</div>
</aside>
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
</li>
<li><a href="#">Link</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li class="divider"></li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="bodyMain" style="z-index: 1 !important; display: inline-block; position: absolute; left: 0px;">
<div class="container" style="">
<button class="btn btn-danger easy-sidebar-toggle">Toggle Sidebar</button>
<script type="text/javascript">
</script>
</div>
<div id="canvasContainer" style="width: 800px; height: 940px; border: 1px solid; padding-left: 0; padding-right: 0;
margin-left: auto; margin-right: auto; display: block; "></div>
<script type="text/javascript">
$(document).ready(function() {
$(document).mousewheel(function(event, delta) {
setYPos(delta);
});
});
var yposition = 50;
var xposition = 20;
var width = 200;
var height = 137;
function setYPos(v) {
yposition += v;
width += v;
height += v;
console.debug('Y: ', yposition);
drawImage(imageObj);
}
function drawImage(imageObj) {
var stage = new Kinetic.Stage({
container: "canvasContainer",
width: $('#canvasContainer').width(),
height: $('#canvasContainer').height()
});
var layer = new Kinetic.Layer();
// image
var image1 = new Kinetic.Image({
image: imageObj,
x: xposition,
y: yposition,
width: width,
height: height,
draggable: true,
dragBoundFunc: function(pos) {
if (pos.x < this.minX) this.minX = pos.x;
return {
x: pos.x,
y: this.getAbsolutePosition().y
}
}
});
stage.getContent().addEventListener('mousemove', function() {
xposition = stage.getPointerPosition().x;
});
// add cursor styling
image1.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
image1.on('mouseout', function() {
document.body.style.cursor = 'default';
});
image1.dragBoundFunc(function() {
return {
x: xposition,
y: yposition
};
});
layer.add(image1);
stage.add(layer);
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'image1.png';
};
</script>
</div>
<script src="js/bootstrap.min.js"></script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
It looks like the error is because you are defining the imageObj variable after it is being used. Instead, rearrange your code to put the imageObj definition near the other top level variable definitions.
In other words, change the big script block to something like this:
<script type="text/javascript">
$(document).ready(function() {
$(document).mousewheel(function(event, delta) {
setYPos(delta);
});
});
var yposition = 50;
var xposition = 20;
var width = 200;
var height = 137;
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'image1.png';
function setYPos(v) {
yposition += v;
width += v;
height += v;
console.debug('Y: ', yposition);
drawImage(imageObj);
}
function drawImage(imageObj) {
var stage = new Kinetic.Stage({
container: "canvasContainer",
width: $('#canvasContainer').width(),
height: $('#canvasContainer').height()
});
var layer = new Kinetic.Layer();
// image
var image1 = new Kinetic.Image({
image: imageObj,
x: xposition,
y: yposition,
width: width,
height: height,
draggable: true,
dragBoundFunc: function(pos) {
if (pos.x < this.minX) this.minX = pos.x;
return {
x: pos.x,
y: this.getAbsolutePosition().y
}
}
});
stage.getContent().addEventListener('mousemove', function() {
xposition = stage.getPointerPosition().x;
});
// add cursor styling
image1.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
image1.on('mouseout', function() {
document.body.style.cursor = 'default';
});
image1.dragBoundFunc(function() {
return {
x: xposition,
y: yposition
};
});
layer.add(image1);
stage.add(layer);
};
</script>