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';
}
Related
I am new in Canvas of HTML5. What I want to do. I want a microphone audio visualizer just like windows Sound visualizer of microphone (control panel => hardware and sound => Sound => recording)
Can anybody tell me Please how I will create it in canvas and adjust with web audio API ?
An other problem is My visualizer is more sensitive. How i will adjust it. I want blank spectrum if no sound is there.
I am sharing a picture what I exactly want.
Img url: http://phillihp.com/wp-content/uploads/2011/12/winamp-step-pre-step-1.png
Please help me out to solve this problem.
Untitled Document
<body>
<canvas id="test"></canvas>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
navigator.webkitGetUserMedia({audio:true}, function(stream){
audioContext = new AudioContext();
analyser = audioContext.createAnalyser();
microphone = audioContext.createMediaStreamSource(stream);
javascriptNode = audioContext.createScriptProcessor(1024, 1, 1);
analyser.smoothingTimeConstant = 0.0;
analyser.fftSize = 512;
microphone.connect(analyser);
analyser.connect(javascriptNode);
javascriptNode.connect(audioContext.destination);
//canvasContext = $("#canvas")[0].getContext("2d");
canvasContext = document.getElementById("test");
canvasContext= canvasContext.getContext("2d");
javascriptNode.onaudioprocess = function() {
var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
var values = 0;
var length = array.length;
for (var i = 0; i < length; i++) {
values += array[i];
}
var average = values / length;
canvasContext.clearRect(0, 0, 150, 300);
canvasContext.fillStyle = '#00ff00';
canvasContext.fillRect(0,130-average,25,140);
}
}, function(e){ console.log(e); }
);
</script>
</body>
Check out this code sample: https://github.com/cwilso/volume-meter/.
Based on cwilso answer. Fixed the problem with mobile devices. "StartNow" is the main JS function in main.js (originallt called by window.onload):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Volume Meter</title>
<script src="volume-meter.js"></script>
<script src="main.js"></script>
</head>
<body onload="javascript:StartNow()"> >
<p>uses audioContext.createScriptProcessor(buffer size) Web Audio API. Use https://webaudio.github.io/web-audio-api/#audioworklet</p>
<canvas id="meter" width="1100" height="60"></canvas>
<p>On Android press button to start (fixes new security requirement added in the new Android OS version)</p>
<button onclick="javascript:StartNow()">Start</button>
</body>
</html>
On Android you need to press the button to start.
This is necessary because of a NEW security requirement added in the new Android OS.
I have an paperscript and I need to call a function in this paperscript from my Javascript to change some values.
I know that I can write it some way, that I dont need paperscript but only javascript.
but I dont get it work.
Are there some other ways I can just export a paperscript function to javascript? or there are some other ways
I also saw something like this: but it also didnt work :-(
https://github.com/paperjs/paper.js/issues/17
--------- my current try to solve it --------
my javascript:
var paperscript = {};
my paperscript code till now:
this.someFunction = function(){ /*doSomething*/ };
//...
paper.install(window.paperscript);
the call outside of paperscript:
paperscript.someFunction(); //error, object doesnt have that function :-(
In this code (jsbin here), javascript is used to call someFunction in the paperscript, turning the rectangle red:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script type="text/javascript" src="https://raw.github.com/paperjs/paper.js/master/dist/paper.js"></script>
<script type="text/javascript">
var paperscript = {};
window.onload = function(){
paperscript.someFunction();
}
</script>
<script type="text/paperscript" canvas="p">
this.someFunction = function(){
rect1.fillColor = new Color('red');
};
var rect1 = new Path.Rectangle({
point: [0, 10],
size: [100, 100],
strokeColor: 'black'
});
paper.install(window.paperscript);
</script>
</head>
<body>
<canvas id="p" resize></canvas>
</body>
</html>
My guess is that you have not been waiting until the paperscript loads before trying to access it with your javascript. Paperscript does not (normally) load until after images have loaded; that's why this code uses window.onload to call the paperscript function.
I have checked this code from my w3schools where its working well.
But when I run this code in my browser, it's not working.
The image does not get displayed in the canvas. Also, I tried the same code in w3schools browser somewhere else, but still it's not working in that browser either.
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" src="flower.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
</script>
</body>
</html>
I would use the image directly, instead of taking it out of the <img>-tag
var c = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
ctx.drawImage(imageObj, 10, 10);
};
imageObj.src = 'flower.jpg';
The problem is that load of an image is asynchronous, so your Javascript code might run before the image finish his loading. Because of that when ctx.drawImage(img, 10, 10) is called img have no complete data and draws nothing on canvas.
To solve that you need to wait the image to completely load. Javascript give you the ability to setup a function to run when an image is completely loaded.
All code that depends of the image data should be put inside the onload callback.
img.onload = function(){
ctx.drawImage(img,10,10);
}
Your script with the modified parts:
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function(){
ctx.drawImage(img,10,10);
}
</script>
If the src is correct doesn't matter if the image is loaded from a html tag or created dynamically in Javascript with new Image(), the onload method works for both.
You probably need to run the javascript on load, rather than directly in body. Change you javascript into this and it should work (at least it does in this fiddle):
function setup_canvas() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
}
window.onload = setup_canvas;
Also, as described in this thread explicitly setting window.onload is not a very good practice, as it might be overwritten by subsequent scripts, so for anything other than testing you would want to use a framework or addEventListener/attachEvent.
Anyone knows how to accomplish such a thing
http://www.jarzebinowe.pl/mieszkania.html (you need to choose floor ...)
in html5?
It's about choosing the apartment, lights, etc. ..
Top how would one image was processed by HTML5 so that was the result
I'm sorry for being so strange and laconic question
Try the html map element
You probably can achieve your "drill-down" into a building more simply by using html map which will let your users click on a portion of an image and link to a new more specific image.
Here's a reference: http://www.w3schools.com/tags/tag_map.asp
[Edit with a fancier display with canvas.]
Here's code and a Fiddle: http://jsfiddle.net/m1erickson/BbCJx/
<!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; padding:15px; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var floorplan=document.getElementById("floorplan");
var planCtx=floorplan.getContext("2d");
planCtx.font="24px Arial";
planCtx.fillStyle="red";
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var lastWindow=-1;
var plan=new Image();
var outside=new Image();
outside.onload=function(){
plan.onload=function(){
ctx.drawImage(outside,0,0);
}
plan.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/inside.jpg";
}
outside.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/outside.png";
var windows=[]
windows.push({top:66, left: 70, bottom:111, right:111, floorplan:0, apartment:"3a"});
windows.push({top:66, left:139, bottom:111, right:183, floorplan:0, apartment:"3b"});
windows.push({top:66, left:211, bottom:111, right:255, floorplan:0, apartment:"3c"});
windows.push({top:153, left: 70, bottom:196, right:111, floorplan:1, apartment:"2a"});
windows.push({top:153, left:139, bottom:196, right:183, floorplan:1, apartment:"2b"});
windows.push({top:153, left:211, bottom:196, right:255, floorplan:1, apartment:"2c"});
windows.push({top:239, left:139, bottom:283, right:182, floorplan:2, apartment:"1a"});
function selectWindow(x,y){
var w;
var isInWindow=false;
for(var i=0;i<windows.length;i++){
w=windows[i];
if(x>w.left && x<w.right && y>w.top && y<w.bottom){
isInWindow=true;
if(i!=lastWindow){
planCtx.clearRect(0,0,floorplan.width,floorplan.height);
planCtx.drawImage(plan,0,0);
planCtx.fillText("Apt: "+w.apartment+", Plan: "+w.floorplan,70,25);
lastWindow=i;
}
break;
}
}
if(!isInWindow){ planCtx.clearRect(0,0,floorplan.width,floorplan.height); };
}
function handleMouseMove(e){
canMouseX=parseInt(e.clientX-offsetX);
canMouseY=parseInt(e.clientY-offsetY);
$("#movelog").html("Move: "+ canMouseX + " / " + canMouseY);
// Put your mousemove stuff here
selectWindow(canMouseX,canMouseY);
}
$("#canvas").mousemove(function(e){handleMouseMove(e);});
}); // end $(function(){});
</script>
</head>
<body>
<p>Mouse over a window to see it's floorplan</p>
<canvas id="canvas" width=300 height=300></canvas>
<canvas id="floorplan" width=300 height=300></canvas>
</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");