I make an application canvas. Every time I call draw () function, multiple images are drawn in canvas. The problem is that with Opera it does not work. Onload function does not always work.
function draw(){
ctx.clearRect (0, 0, canvas.width, canvas.height);
var img = new Image();
img.src = srcvolets;
img.onload = function(){
ctx.drawImage(img, 0, 0,canvas.width,canvas.height);
if(srccouleur!=null){
var img2 = new Image();
img2.src = 'images/couleurs/'+volets+'/'+srccouleur+'.png';
img2.onload = function(){
ctx.drawImage(img2, 0, 0,canvas.width,canvas.height);
if(srcsculpture!=null){
var img3 = new Image();
img3.src = cheminsculpt+srcsculpture;
img3.onload = function(){
if(volets=='furno'){
ctx.drawImage(img3, 175, 235);
}else{
ctx.drawImage(img3, 175, 242);
}
}
}
}}}}
Thank you. (Sorry for my English, I speak French)
I think this has to do with images being cached, and the onload firing before it is set.
You might need to try setting onload before you set src. See this article about the problem.
Related
I'm building a simple video game using HTML Canvas and JavaScript. I'm trying to replace a black square with an image of a strawberry, but the image is not displaying on the canvas. How would I make the image replace the square?
this.draw = function() {
var img = new Image();
img.src = "strawberry.png";
ctx.drawImage(img, 10, 10);
ctx.fillStyle = "black";
ctx.fillRect(this.x, this.y, 10, 10);
}
The problem is that the image may not have loaded by the time the code is being called. You will need to wait for that to happen.
Try:
function loadimage() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "strawberry.png";
img.onload = function() {
ctx.drawImage(img, 0, 0, c.width, c.height);
}
}
window.onload = loadimage;
I have put a version of this code (I have a different image filename for my test) into a SCRIPT tag in the HEAD section of the page. The code runs when the page has finished loading, but the code itself waits for the img.onload event to be triggered before actually drawing the image. And, change "myCanvas" to the ID of your canvass tag.
The title is poorly worded but there's no way to concisely describe the problem. I'm drawing images to the 2D context of a dynamically created canvas. The data of the context is then saved to an image via toDataURL, which is then draw on every frame. The code below is condensed, I will be drawing multiple images to the context, not just one; which is why I'm saving to an image. I will only draw part of the image at once but the image remains constant so I thought this was the best method, if there are alternatives I will happily accept those as answers.
In short: many images drawn on an image. Part of the image draw each frame.
The code below works:
var picture = new Image();
picture.src = "images/tilesheet.png";
var canvas = document.getElementById("background");
var context = canvas.getContext("2d");
function generate(){
var ctx = document.createElement("canvas").getContext("2d");
ctx.canvas.width = canvas.width;
ctx.canvas.height = canvas.height;
ctx.fillStyle = "red";
ctx.rect (0, 0, 40, 40);
ctx.fill();
ctx.drawImage(picture,0,0);
image = new Image();
image.src = ctx.canvas.toDataURL("image/png");
}
function draw(){
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0,0,100,100,0,0,100,100);
}
function play(){
generate();
setInterval(function(){draw();}, 0.0333);
}
window.onload = function(){
if(picture.complete)play();
else picture.onload = play;
}
<canvas id="background"></canvas>
However this doesn't:
window.Game = {};
canvas = document.getElementById("background");
var tilesheet = new Image();
tilesheet.src = "images/tilesheet.png";
(function(){
function Map(){
this.width = 2736;
this.height = 2736;
this.image = null;
}
Map.prototype.generate = function(){
var ctx = document.createElement("canvas").getContext("2d");
ctx.canvas.width = this.width;
ctx.canvas.height = this.height;
ctx.fillStyle = "red";
ctx.rect (0, 0, 40, 40);
ctx.fill();
ctx.drawImage(tilesheet,0,0);
this.image = new Image();
this.image.setAttribute('crossOrigin', 'anonymous');
this.image.src = ctx.canvas.toDataURL("image/png");
}
Map.prototype.draw = function(context){
context.drawImage(this.image, 0,0, context.canvas.height, context.canvas.height, 0, 0, context.canvas.height, context.canvas.height);
}
Game.Map = Map;
})();
(function(){
var room = new Game.Map();
room.generate();
var draw = function(){
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
room.draw(canvas.getContext("2d"));
}
Game.play = function(){setInterval(function(){draw();}, 0.0333);}
})();
window.onload = function(){
if(tilesheet.complete)Game.play();
else tilesheet.onload = Game.play;
}
<canvas id="background"></canvas>
It seems therefore, that the problem is lying in the fact that I'm using function objects but I'm not sure. What am I doing wrong? There are no errors in the debug console.
Those two have different execution order.
First one:
...
Attach image.onload
Call generate()
...
Second one:
...
Call generate()
Attach image.onload
...
That's why it's not working - generate() expects image to be loaded, however second case order doesn't guarantees it.
Instead of
...
room.generate();
...
Game.play = function(){setInterval(function(){draw();}, 0.0333);}
do this
...
Game.play = function(){
room.generate();
setInterval(function(){draw();}, 0.0333);
}
This question already has an answer here:
Canvas image crossplatform insecure error
(1 answer)
Closed 7 years ago.
When trying to draw an image onto a canvas, and then saving the canvas to an image, I get the following error:
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported
var picture = new Image();
picture.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png";
var canvas = document.getElementById("background");
var context = canvas.getContext("2d");
function generate(){
var ctx = document.createElement("canvas").getContext("2d");
ctx.canvas.width = canvas.width;
ctx.canvas.height = canvas.height;
ctx.fillStyle = "red";
ctx.rect (0, 0, 40, 40);
ctx.fill();
ctx.drawImage(picture,0,0);
image = new Image();
image.setAttribute('crossOrigin', 'anonymous');
image.src = ctx.canvas.toDataURL("image/png");
}
function draw(){
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0,0,100,100,0,0,100,100);
}
function play(){
generate();
setInterval(function(){draw();}, 0.0333);
}
window.onload = function(){
if(picture.complete)play();
else picture.onload = play;
}
<canvas id="background" width=500 height=500></canvas>
I know it's to do with drawing the image on the canvas because when that line is removed everything's okay and you can see the red box:
var picture = new Image();
picture.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png";
var canvas = document.getElementById("background");
var context = canvas.getContext("2d");
function generate(){
var ctx = document.createElement("canvas").getContext("2d");
ctx.canvas.width = canvas.width;
ctx.canvas.height = canvas.height;
ctx.fillStyle = "red";
ctx.rect (0, 0, 40, 40);
ctx.fill();
image = new Image();
image.setAttribute('crossOrigin', 'anonymous');
image.src = ctx.canvas.toDataURL("image/png");
}
function draw(){
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, 0,0,100,100,0,0,100,100);
}
function play(){
generate();
setInterval(function(){draw();}, 0.0333);
}
window.onload = function(){
if(picture.complete)play();
else picture.onload = play;
}
<canvas id="background" width=500 height=500></canvas>
So it's drawImage that causes this to fail.
I've read other questions and the solutions were "just add image.setAttribute('crossOrigin', 'anonymous');" (which I've done) or to put them in the same directory (I tried this by placing both files on desktop) but neither seemed to solve it for me.
Is there a fix or an alternative method? All I want to do is draw multiple images onto one image. (The red box was just for show.)
I tried this by placing both files on desktop
No. You need a web server and to open your files in http:// (or https://) for them to be considered of the same origin. When you open your files in file://, they're not considered of the same origin, even if you serve them from the same directory.
I want to load a png image in base64 to html5 canvas element. I have this code:
<html>
<head></head>
<body>
<canvas id="pageCanvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("pageCanvas");
var ctx = canvas.getContext("2d");
var imageData ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";
var imageObj = new Image();
imageObj.src = imageData;
ctx.drawImage(imageObj, 50, 100);
</script>
</body>
</html>
The above code working well in IE, chrome, Microsoft edge. But in Firefox the image was not displayed. It display blank page. Sometime when we reload the page then it displayed an image in canvas.
Thank you very much for the answers.
It is bad :
var imageObj = new Image();
imageObj.src = imageData;
ctx.drawImage(imageObj, 50, 100);
You should wait image load :
var imageObj = new Image();
imageObj.onload = function(){
ctx.drawImage(imageObj, 50, 100);
}
imageObj.src = imageData;
If you don't need callback, you can wait image complete == true, but i am not advice to use this code
var imageObj = new Image();
imageObj.src = imageData;
while(!imageObj.complete){/**thread sleep wile image is not ready**/}
ctx.drawImage(imageObj, 50, 100);
I am making an app for iPhone and Android using HTML, CSS, and JavaScript with PhoneGap. I'm using HTML5 canvas. My ctx.drawImage(); function isn't working, and I cannot figure out why. Here is my code.
var imageReady = false;
var image = new Image();
image.onload = function () {
imageReady = true;
};
image.src = "http://urlToImage.com";
ctx.drawImage(image, 0, 0, 300, 180);
I verified the src link and it worked. Any thoughts? Thanks.
Your drawImage call should be inside the asynchronous callback (which is executed when the image has loaded). Currently it is being invoked before the image is loaded.
var imageReady = false;
var image = new Image();
image.onload = function () {
imageReady = true;
ctx.drawImage(image, 0, 0, 300, 180);
};
image.src = "http://urlToImage.com";