I am drawing image which is loaded using loader method in two different places. But it only displays the second one. (I am following this http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/)
If I add an alert() it works in Fx but not in Chrome. I want it to work everywhere without alert()
If I try drawing Image without using preloaded image I am getting the desired result. But I am thinking it is extra load (http://www.html5canvastutorials.com/tutorials/html5-canvas-images/)
ImageOnload("O",120,120); //This image not displaying
alert("If i add alert it works only in Fx but not in Chrome")
ImageOnload("O",120,20);//only this is displaying ???
<html>
<head>
</head>
<script type="text/javascript" >
var ctx;
var ImageVariable={};
window.onload= function()
{
var canvas = document.getElementById("gameLoop");
ctx = canvas.getContext("2d");
ImageBuilder(ImageSourceDB);
ImageOnload("O",120,120); //This image is not displaying
//alert("If i add alert it works only in FFox but not in chrome")
ImageOnload("O",120,20);
}
var ImageSourceDB=
{
X:"./Images/X.gif",
O:"./Images/O.gif"
}
function ImageBuilder(ImageSrcDB)
{
for (iSrc in ImageSrcDB)
{
ImageVariable[iSrc]= new Image();
ImageVariable[iSrc].src = ImageSrcDB[iSrc];
}
}
function ImageOnload(ImageSrc,x,y)
{
ImageVariable[ImageSrc].onload= function ()
{
ctx.drawImage(ImageVariable[ImageSrc],x,y);
};
ImageVariable[ImageSrc].src = ImageSourceDB[ImageSrc];
}
</script>
<body>
<canvas class ="pattern" id="gameLoop" height="300" width="300" />
</body>
</html>
List item
ImageOnload("O",120,120); //This image not displaying
ImageOnload("O",120,20);//only this is displaying ???
You forgot to change the id of the object:
ImageOnload("O",120,120);
ImageOnload("X",120,20); // Use "X", not "O"!!!
If you still want to show "O" twice, then you should draw it twice, but with only one onload function. See example below:
<script type="text/javascript" >
var ctx;
var ImageVariable={};
var ImageSourceDB = {
X:"./Images/X.gif",
O:"./Images/O.gif"
}
window.onload = function() {
var canvas = document.getElementById("gameLoop");
ctx = canvas.getContext("2d");
ImageBuilder(ImageSourceDB);
ImageVariable["O"].onload = function() {
// this will be executed when the image "O" is loaded
// this is a pointer to ImageVariable["O"]
ctx.drawImage(this, 120, 120);
ctx.drawImage(this, 120, 20);
}
ImageVariable["X"].onload = function() {
// this will be executed when the image "X" is loaded
ctx.drawImage(this, 30, 30);
}
}
function ImageBuilder(ImageSrcDB) {
for (iSrc in ImageSrcDB) {
ImageVariable[iSrc]= new Image();
ImageVariable[iSrc].src = ImageSrcDB[iSrc];
}
}
</script>
Related
I have recently started to learn html and i'm currently working on java script. My problem is that i would to stop the program until a image as been load for, after that draw the image on a canvas (because if the image is not load and i want to draw it on a canvas, nothing would be display).
Here's my code (put in one file) :
<html>
<head>
<title>dog food</title>
<link rel = "icon" href = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQudx87gpctKJdgDyq5DpVlb12fI3_7XgbfXw&usqp=CAU">
<style>
canvas.GameWindow {
display : block;
margin-left : auto;
margin-right : auto;
}
</style>
</head>
<body>
<canvas width = 600 height = 350 class = GameWindow>Sorry but the canvas is not taken by your web browser</canvas>
<script>
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
//initialize canvas
/*ctx.fillStyle = 'black';
ctx.fillRect(0, 0, 600, 350);*/
//create function
function drawAnImage(positionX,positionY,width,height,image) {
ctx.drawImage(image, positionX, positionY, width, height);
console.log("an image has been drawn");
};
var img = new Image();
img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQudx87gpctKJdgDyq5DpVlb12fI3_7XgbfXw&usqp=CAU";
img.onload = function() {
console.log("image load");
};
drawAnImage(0,0,100,100,img);
</script>
</body>
</html>
Actually when i run the code, nothing is display on the canvas because the image is load after i call the drawAnImage function.
Wait for it to load with a callback:
img.onload = function () {
drawImage(0, 0, 100, 100, img);
};
You can also do something if there was an error loading it:
img.onerror = function () {
alert("Oh no an error!");
};
Here it is with ES6 arrow functions and addEventListener:
img.addEventListener("load", () => {
drawImage(0, 0, 100, 100, img);
});
img.addEventListener("error", () => {
alert("Oh no an error!");
});
So i finaly use this little algorithm for image loading :
const imageToLoad = [];
var totalImage = imageToLoad.length;
let imageLoad = [];
for (var i = 0;i<totalImage;i++) {
var img = new Image();
img.src = imageToLoad[i];
imageLoad.push(img);
img.onload = function() {
if (i == totalImage) {
//here i start my game loop
gameLoop(imageLoad);
};
};
};
So what values is for? The first valu imageToLoad is where you would put the images you want to use and imageLoad is where you would find your loaded images. Finaly, for the peoples interested in the algorithm, the algorithm would every time an image is load see if it the last image to load, if yes, the algorithm would start in my case the gameloop of the game.
I have a canvas, which handle images drawn on it with the CamanJS plugin and it works perfectly. But if I manipulate the canvas manually (without the aid of plugin) the image loses its effect. For example, if I add a filter (Vintage, for example) to the image, works perfectly, but if I turn the canvas, using translate and scale the canvas is reversed but the image loses its effect. It seems that with each change in the image through the plugin, it saves its current state, and therefore, the effect is lost after a change without using it. How to do this while preserving the effects of the image?
To add to the effect, use the same examples of the plugin site, since the code to reverse the canvas is (scripts.js):
$(document).ready(function() {
$("html, body").on("click", "#vintage", function() {
Caman("#filtrar", function() {
this.vintage().render();
});
});
$("html, body").on("click", "#inverter_foto", function() {
var c = $("#filtrar")[0];
var ctx = c.getContext("2d");
ctx.translate(filtro_width, 0);
ctx.scale(-1, 1);
ctx.drawImage(filtro, 0, 0);
});
});
The filtro_width variables and filtro correspond to the image drawn on the canvas.
on HTML:
<canvas id="filtrar" width="640" height="255"></canvas>
<button id="vintage">Vintage Effect</button>
<button id="inverter_foto">Reverse</button>
<script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>
</script>
<script type="text/javascript" src="/js/caman.full.min.js"></script>
<script type="text/javascript" src="/js/scripts.js"></script>
Example:
If you do manipulate the canvas outside of the Caman library, you need to use the reloadCanvasData method to reinitialize the imageData stored in the Caman object, otherwise, it only uses the first one + what it updated itself.
vintage.onclick = function() {
Caman("#filtrar", function() {
this.vintage().render();
});
};
inverter_foto.onclick = function() {
var c = $("#filtrar")[0];
var clone = c.cloneNode(true);
var ctx = clone.getContext("2d");
ctx.translate(c.width, 0);
ctx.scale(-1, 1);
ctx.drawImage(c, 0, 0);
var oCtx = c.getContext('2d');
oCtx.clearRect(0, 0, c.width, c.height);
oCtx.drawImage(clone, 0, 0);
if(check.checked){
Caman("#filtrar", function() {
this.reloadCanvasData();
});
}
};
var filtro = new Image();
filtro.crossOrigin = 'Anonymous';
var filtro_width = filtrar.width / 2;
filtro.onload = function() {
filtrar.getContext('2d').drawImage(this, 0, 0, filtrar.width, filtrar.height);
};
filtro.src = "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.js"></script>
<p>First revert the image then apply the effect</p>
<button id="inverter_foto">Reverse</button>
<button id="vintage">Vintage Effect</button>
reloadCanvasData<input id="check" type="checkbox" checked/>
<canvas id="filtrar" width="640" height="255"></canvas>
I'm developing a printing tool using HTML5 canvas. As a test, I've tried to draw an image and a rectangle on the canvas, and then copy it to a new window for printing, using the code below. But all I'm getting in the new window is a blank page.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="pageCanvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("pageCanvas");
canvas.height="700";
canvas.width="1000";
var ctx = canvas.getContext("2d");
var imageData="data:image/png;base64,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";
var imageObj = new Image();
imageObj.src = imageData;
imageObj.addEventListener("load", function() {
ctx.drawImage(imageObj, 50, 100,1000,600);
ctx.beginPath();
ctx.rect(100, 101, 200, 100);
ctx.lineWidth = 7;
ctx.strokeStyle = 'black';
ctx.stroke();
}, false);
var printWindow = window.open('');
printWindow.document.write('<html><BODY>');
printWindow.document.write('<center>');
printWindow.document.write('<img src="' + canvas.toDataURL()+'"/>');
printWindow.document.write('</center></body></html>');
printWindow.document.close();
printWindow.print();
</script>
</body>
</html>
Can you please guide me to overcome this issue?
You're opening the new window and trying to copy the content of the canvas onto it immediately after attaching the load event handler to the image, before the handler has actually had a chance to execute.
Just move all the JS code starting with the var printWindow = window.open(''); line inside the event handler, and it should work.
Oh, and please indent your code, especially if you expect anyone else to read it.
Addendum: If you want to wait until multiple images have loaded, the simplest way is to count the load events and call a function when all of them have fired, like this:
var imageURLs = [ ... image URLs here ... ];
var imageObjs = [];
var imagesLoaded = 0;
for (var i = 0; i < imageURLs.length; i++) {
var image = new Image();
image.addEventListener( "load", function() {
imagesLoaded++;
if (imagesLoaded == imageURLs.length) allImagesLoaded();
} );
image.src = imageURLs[i];
imageObjs.push(image);
}
function allImagesLoaded() {
// now do something with imageObjs
};
You could also get fancy and play with things like ES6 promises, but ultimately, the end result is the same.
See also:
Can I sync up multiple image onload calls?
Javascript - wait images to be loaded
I'm trying to use the element to draw a static Google Maps image that comes onscreen once a user clicks on a submit button. The html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=true">
</script>
<script type="text/javascript" src="createmap.js">
</script>
</head>
<body>
<form onsubmit="display_map(34.1,-76.08168); return false;">
<input type="submit" value="Submit"/>
</form>
<canvas id='map-canvas' />
</body>
</html>
And the display_map() function in createmap.js:
function display_map(center0, center1) {
var image = new Image();
image.src = 'http://maps.googleapis.com/maps/api/staticmap?center='
+ center0 + ',' + center1 + '&zoom=13&size=800x800&sensor=false';
var canvas = document.getElementById('map-canvas');
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
}
The first time that the user clicks on the submit button, nothing happens. Every subsequent click, however, will load the image (even if the tab is closed and then reopened). Changing the center0 and center1 arguments will reset the page and again force two clicks to display the new image that Google generates. This behavior doesn't seem to be coming from Google Maps, as the same issue occurs when I load an image from my hard drive. This is happening in every browser I've tested (Firefox, IE and Chrome).
It's because the first time the image hasn't loaded properly so the canvas doesn't draw anything. The image loads asynchronous in the background so your function will continue regardless.
To handle this scenario try with:
function display_map(center0, center1) {
var image = new Image();
image.onload = function() {
var canvas = document.getElementById('map-canvas');
var context = canvas.getContext('2d');
context.drawImage(this, 0, 0);
}
image.src = 'http://maps.googleapis.com/maps/api/staticmap?center='
+ center0 + ',' + center1 + '&zoom=13&size=800x800&sensor=false';
}
That the function returns immediately is something that needs to be taken into account in case you do several draw operations to canvas (graphics on top for instance).
For these cases you need to use callbacks so when an image has finished loading you call the next step from within the onload handler with a single extra parameter:
function display_map(center0, center1, callback) {
var image = new Image();
image.onload = function() {
var canvas = document.getElementById('map-canvas');
var context = canvas.getContext('2d');
context.drawImage(this, 0, 0);
callback();
}
image.src = 'http://maps.googleapis.com/maps/api/staticmap?center='
+ center0 + ',' + center1 + '&zoom=13&size=800x800&sensor=false';
}
Now you can create a call chain:
function step1() {
display_map(center0, center1, step2);
}
function step2() {
/// called when step1 has finished
}
I have discovered some race conditions with drawing an HTML5 canvas programmatically in JavaScript. These occur when trying to modify an image before it is loaded, and I have been able to fix most of them using the technique:
var myImage = document.createElement('img');
myImage.onload = function(){
console.log("image src set!");
};
myImage.src="img/foobar.png";
I am doing this operation for one of several images, and am having a strange thing happen. Basically, the image is drawing to the canvas before it is loaded. I even tried to hack-around the issue by using a boolean value to specify if the image has been drawn yet. Here is my code with the output. To understand the context, this code is part of a function that is called every second to update the canvas.
if (!at_arrow_black)//one of two images used to show an arrow on the canvas
{
at_arrow_black = document.createElement('img');
at_arrow_black.onload = function() {
if (foregroundColor === "black")//which image to draw depends on the foreground color
{
console.log("black load");
context.drawImage(at_arrow_black, canvas.width*.775, canvas.height*.66, canvas.width*.075, font*4/5);
}
};
at_arrow_black.src = "img/at_arrow.png";
}
else
{
if (foregroundColor === "black")
{
if (hasDrawnArrow)//this starts as false
{
console.log("1. black draw");
context.drawImage(at_arrow_black, canvas.width*.775, canvas.height*.66, canvas.width*.075, font*4/5);
}
else
{
logDebug("2. black draw");
hasDrawnArrow = true;
}
}
}
This results in the canvas first drawing one arrow, then the other, at the first iteration of this loop (and in slightly different places). The output I get:
2. black draw
black load
1. black draw
This is the expected output - but why does the canvas draw the image anyways? Is this a race condition of some sort? What can I do to fix it?
If you're loading more than 1 image, you will probably want to build yourself an image loader so all images are loaded before you start working with them.
Here is an example:
<!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 canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
var canvas2=document.getElementById("canvas2");
var ctx2=canvas2.getContext("2d");
var imageURLs=[];
var imagesOK=0;
var imagesFailed=0;
var imgs=[];
imageURLs.push("http://upload.wikimedia.org/wikipedia/commons/d/d4/New_York_City_at_night_HDR_edit1.jpg");
imageURLs.push("http://www.freebestwallpapers.info/bulkupload//20082010//Places/future-city.jpg");
loadAllImages();
function loadAllImages(){
for (var i = 0; i < imageURLs.length; i++) {
var img = new Image();
imgs.push(img);
img.onload = onLoad;
img.onerror = onFail;
img.src = imageURLs[i];
}
}
var imagesAllLoaded = function() {
if (imagesOK+imagesFailed==imageURLs.length ) {
// all images are processed
// ready to use loaded images
// ready to handle failed image loads
ctx1.drawImage(imgs[0],0,0,canvas1.width,canvas1.height);
ctx2.drawImage(imgs[1],0,0,canvas2.width,canvas2.height);
}
};
function onLoad() {
imagesOK++;
imagesAllLoaded();
}
function onFail() {
// possibly log which images failed to load
imagesFailed++;
imagesAllLoaded();
};
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas1" width=300 height=300></canvas><br/>
<canvas id="canvas2" width=300 height=300></canvas>
</body>
</html>
Here's the JSFiddle.
I know there is already an accepted answer, but here is an alternative anyway.
You need to wait until all your images are loaded. I use an image loader that sets a flag when all images are loaded so my script can then continue.
Image Loader
function ImageLoader(sources, callback)
{
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
Usage
// *** The images you want to laod
var sources = {
background: 'images/bg.png',
assets: 'images/assets.png',
};
// *** What you want to happen once all images have loaded...
ImageLoader(sources, function(images) {
// *** Example of what I usually do
_images = images;
_setImagesReady = true;
});
// *** Access the image by specifying it's property name you defined. eg:
ctx.drawImage(_image.background, 0, 0);