The image will load when I open the page locally, but when i go to the ip the image is not loaded. the image is in the same directory as the html file.
<!DOCTYPE html>
<html>
<head>
<script type="text/JavaScript">
var img = new Image;
img.onload = function(){
var canvas = document.getElementById("can");
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
setTimeout(loadImage, 1000);
};
function loadImage(){
img.src = 'image.jpg';
}
</script>
<title>Page</title>
</head>
<body onload="JavaScript:loadImage();">
<canvas id="can" width="1280" height="720" />
</body>
</html>
I really hope this solution will work for you i just edited the root of the image by adding slash symbol and changed onload="loadImage();" function
<!DOCTYPE html>
<html>
<head>
<script type="text/JavaScript">
var img = new Image;
img.onload = function(){
var canvas = document.getElementById("can");
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
setTimeout(loadImage, 1000);
};
function loadImage(){
img.src = '/image.jpg';
}
</script>
<title>Page</title>
</head>
<body onload="loadImage();">
<canvas id="can" width="1280" height="720" />
</body>
</html>
Relative path in javascript usually had unexpected results for me and if it worked in one browser it was much likely to don't work in one another browser. I found that it is much convenient to store root address in a config file and make absolute path instead of relative paths.
const contentsBaseAddress = 'http://localhost:80/contents/'
function loadImage(){
img.src = contentsBaseAddress + 'images/myImage.jpg';
}
I'm trying to find out what graphics library is BitBucket using to create the visualization of the commit graph (the lines on the left), if it's public.
If the library used by BitBucket is not available open source or commercially, what would be some alternative HTML 5 based libraries can be used to achieve similar effects ?
This is not for a VCS system but for other kind of project
Here's code to draw the primitives in the commit graph:
lines: that curve into columnar tracks
branches: that split a single line into 2
dots: representing events
A Demo: http://jsfiddle.net/m1erickson/cz37L/
Example code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.lineWidth=2;
var offsetX=20;
var offsetY=10;
var spacingX=12;
var spacingY=25;
var y=0;
// lines
var lines=[];
lines.push([0,0,0,0,1,1,2,2,2,2,2,2,2,2,2,2,3]);
lines.push([1,1,1,1,2,2,3,3,3,3,3,3,3,3,3,3,4]);
lines.push([2,2,2,2,3,3,4,4,4,4,4,4,4,4,4,4,5]);
lines.push([3,3,3,3,4,4]);
lines.push([4,4,4,4,5,5,5,5,5,5,5,5,5,5,5,5]);
lines.push([5,5,5,5]);
var branches=[];
branches.push({line:2,x1:4,y1:5,x2:4,y2:4});
branches.push({line:3,x1:5,y1:2,x2:4,y2:3});
branches.push({line:4,x1:5,y1:6,x2:4,y2:5});
branches.push({line:4,x1:5,y1:14,x2:4,y2:13});
// dots
var events1=[5,5,5,4,4,4,5,4,4,4,4,4,4,4,5,5];
var events2=[5,5,5,3,3,2,4,2,2,2,2,2,2,2,4,2];
var colors=["purple","olive","cyan","magenta","khaki","green"];
drawAll();
function drawAll(){
for(var i=0;i<lines.length;i++){
drawLine(lines[i],colors[i]);
}
for(var i=0;i<branches.length;i++){
drawBranch(branches[i],colors[branches[i].line]);
}
for(var i=0;i<events1.length;i++){
ctx.beginPath();
ctx.arc(offsetX+events1[i]*spacingX,offsetY+i*spacingY,3,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle=colors[events2[i]];
ctx.fill();
}
}
function drawBranch(branch,linecolor){
var x1=offsetX+branch.x1*spacingX;
var x2=offsetX+branch.x2*spacingX;
var y1=offsetY+branch.y1*spacingY;
var y2=offsetY+branch.y2*spacingY;
var cy=cy2=y1+(y2-y1)/2;
ctx.beginPath();
ctx.moveTo(offsetX+branch.x1*spacingX,offsetY+branch.y1*spacingY);
ctx.bezierCurveTo(x1,cy,x2,cy,x2,y2);
ctx.strokeStyle=linecolor;
ctx.stroke();
}
function drawLine(line,linecolor){
var y=0;
ctx.beginPath();
ctx.moveTo(offsetX+line[0]*spacingX,offsetY+y*spacingY);
for(var i=1;i<line.length;i++){
if(line[i]==line[i-1]){
ctx.lineTo(offsetX+line[i]*spacingX,offsetY+y*spacingY);
}else{
var x1=offsetX+line[i-1]*spacingX;
var x2=offsetX+line[i]*spacingX;
var y1=offsetY+(y-1)*spacingY;
var y2=offsetY+y*spacingY;
var cy=cy2=y1+(y2-y1)/2;
ctx.bezierCurveTo(x1,cy,x2,cy,x2,y2);
}
y++;
}
ctx.strokeStyle=linecolor;
ctx.stroke();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=400></canvas>
</body>
</html>
I'm drawing a number of rectangles on an HTML5 canvas and want to be able to right click on the boxes and get a context sensitive menu displayed. The menu should be specific to the type of box being clicked on and be totally user specified, i.e. it should not include Reload, Save As, Print etc...
Can any one give me any pointers?
Thanks,
Paul
You can addEventListener for context menu to handle right-mouse requests:
// listen for contextmenu requests
canvas.addEventListener('contextmenu', handleContextmenu, false);
Then in the handler, you check each of your rects for hits:
function handleContextmenu(e){
// get mouse position relative to the canvas
var x=parseInt(e.clientX-offsetX);
var y=parseInt(e.clientY-offsetY);
// check each rect for hits
for(var i=0;i<rects.length;i++){
var rect=rects[i];
var rectRight=rect.x+rect.width;
var rectBottom=rect.y+rect.height;
// if this rect is hit, display an alert
if(x>=rect.x && x<=rectRight && y>=rect.y && y<=rectBottom ){
alert("Context menu request on the "+rect.color+" rectangle.");
}
}
// prevents the usual context from popping up
e.preventDefault()
return(false);
}
Here is working code (no jsFiddle because no right-clicking in X-Domain iframes):
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var rects=[];
rects.push({x:50,y:50,width:50,height:50,color:"red"});
rects.push({x:150,y:100,width:75,height:75,color:"blue"});
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<rects.length;i++){
var rect=rects[i];
ctx.beginPath();
ctx.fillStyle=rect.color;
ctx.rect(rect.x,rect.y,rect.width,rect.height);
ctx.fill();
}
// listen for contextmenu requests
canvas.addEventListener('contextmenu', handleMouseDown, false);
function handleMouseDown(e){
// get mouse position relative to the canvas
var x=parseInt(e.clientX-offsetX);
var y=parseInt(e.clientY-offsetY);
// check each rect for hits
for(var i=0;i<rects.length;i++){
var rect=rects[i];
var rectRight=rect.x+rect.width;
var rectBottom=rect.y+rect.height;
// check each rect for hits
if(x>=rect.x && x<=rectRight && y>=rect.y && y<=rectBottom ){
alert("Context menu request on the "+rect.color+" rectangle.");
}
}
// prevents the usual context from popping up
e.preventDefault()
return(false);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
I have started using JQPlot to draw the graph in real time as well. I have got one sample example working in which it will draw the graph with two data only-
var storedData = [70, 10];
Then I have added a button, if I click on that button, it will start rendering some more data. Basically, you can say just like real time data from the server-
But the problem that I am facing currently is, as soon as I clicked on Start Updates button, it doesn't draw anything. So I believe, I messed up something the button click thing. It's been a long time I worked on Javascript and HTML thing so I have forgotten lot of things.
Below is my code-
<!DOCTYPE html>
<html>
<head>
<title>Line Charts and Options</title>
<link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
<link rel="stylesheet" type="text/css" href="examples.min.css" />
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="colmask leftmenu">
<div class="colleft">
<div class="col1" id="example-content">
<div id="chart1" style="height: 300px; width: 500px; position: relative;"></div>
<button>Start Updates</button>
<script class="code" type="text/javascript">
$(document).ready(function(){
var storedData = [70, 10];
var plot1;
renderGraph();
$('button').click( function(){
doUpdate();
$(this).hide();
});
function renderGraph() {
if (plot1) {
plot1.destroy();
}
plot1 = $.jqplot('chart1', [storedData]);
}
var newData = [9, 1, 4, 6, 8, 2, 5];
function doUpdate() {
if (newData.length) {
var val = newData.shift();
$.post('/echo/html/', {
html: val
}, function(response) {
var newVal = new Number(response); /* update storedData array*/
storedData.push(newVal);
renderGraph();
log('New Value '+ newVal+' added')
setTimeout(doUpdate, 3000)
})
} else {
log("All Done")
}
}
function log(msg) {
$('body').append('<div>'+msg+'</div>')
}
});
</script>
<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
</body>
</html>
I am not able to make the button click event work. As soon as I click on Start Update button, it does not draw anything. Correct behavior should be that it should start rendering on the graph with new datasets.
I tried to make that real-time rendering thing work from this jsfiddle
I copied same bunch of code from the above JSFiddle in my HTML but it doesn't working for me. Can anybody help me with this?
Here you go - you will have to update to your jqplot location in script tags. Also, I had to change the doUpdate to doUpdate2 as $.post will not work without jfiddle as far as I know.
<!DOCTYPE html>
<html>
<head>
<title>Line Charts and Options</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="jqplot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript">
$(function(){
/* store empty array or array of original data to plot on page load */
var storedData = [70, 10];
/* initialize plot*/
var plot1;
renderGraph();
$('button').click( function(){
doUpdate2();
$(this).hide();
});
function renderGraph() {
if (plot1) {
plot1.destroy();
}
plot1 = $.jqplot('chart1', [storedData]);
}
var newData = [9, 1, 4, 6, 8, 2, 5];
var cp = 0;
function doUpdate2() {
var newVal = new Number(newData[cp]); /* update storedData array*/
storedData.push(newVal);
renderGraph();
log('New Value '+ newVal+' added')
if (cp < newData.length-1) setTimeout(doUpdate2, 3000)
cp++;
}
function doUpdate() {
if (newData.length) {
var val = newData.shift();
$.post('/echo/html/', {
html: val
}, function(response) {
var newVal = new Number(response); /* update storedData array*/
storedData.push(newVal);
renderGraph();
log('New Value '+ newVal+' added')
setTimeout(doUpdate, 3000)
})
} else {
log("All Done")
}
}
function log(msg) {
$('body').append('<div>'+msg+'</div>')
}
});
</script>
</head>
<body>
<div id="chart1" style="height: 300px; width: 500px; position: relative;"></div>
<button>Start Updates</button>
</body>
</html>
What is wrong with this code? :S.. My canvas stays empty. Image URL is correct and image loads.
This is my engine.js file:
var canvas;
var stage;
function init()
{
canvas = document.getElementById("canvas");
stage = new Stage(canvas);
playerImg = new Image();
playerImg.src = 'img/player/walkingbl.png';
playerImg.onload = onPlayerLoaded;
Ticker.setFPS(30);
Ticker.addListener(window);
}
function tick()
{
stage.update();
}
function onPlayerLoaded()
{
console.log(playerImg);
player = new Bitmap(playerImg);
player.x = 300;
player.y = 450;
stage.addChild(player);
console.log('Player added to stage');
}
$(document).ready(function(){
init();
});
And this is my index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Game Engine</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id='container'>
<canvas id='#canvas' width='1000' height='350'></canvas>
</div>
<script src="js/jquery.js"></script>
<script src="js/easel.js"></script>
<script src='js/engine.js'></script>
</body>
I'm new to the whole easel.js and never did anything with Flash or actionscript. I'm an PHP developer by heart, so this is a pretty big transition for me. The lack of documentation / tutorials / examples, make it very hard for me to learn how to use easel.js. So if you have any pointers or resources for me to check out. Please share!
This line is wrong:
<canvas id='#canvas' width='1000' height='350'></canvas>
The ID doesnt need a #. the right line is:
<canvas id='canvas' width='1000' height='350'></canvas>
but I wouldnt use the word "canvas" as an identifier, as it could be confused with the tag. Better use:
<canvas id='mycanvas' width='1000' height='350'></canvas>
and change the JS code:
canvas = document.getElementById("mycanvas");