<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="resources/js/jquery-1.7.2.min.js"> </script>
...
...
<script>
...
...
function draw(screen, data) {
if (screen.document.getElementById("screen") == null){
screen.document.write('<div id="screen" style="width:' +
data.maxX + '; height:' + data.maxY + '; margin: auto;" >' +
'<canvas id="screenCanvas" width=' + data.maxX + ' height=' +
data.maxY + 'style="border:2px solid #000000;color:#000000;" > </canvas></div>');
}
var canvas = screen.document.getElementById('screenCanvas');
var context = canvas.getContext('2d');
var tileY = 0;
var tileX = 0;
var counter = 0;
var tileWidth = data.tileWidth;
var tileHeight = data.tileHeight;
for (var i=0;i<(data.maxX/data.tileWidth);i++){
for (var j=0;j<(data.maxY/data.tileHeight);j++){
var img = new Image();
img.onload = (function(img, tileX, tileY, tileWidth, tileHeight){
return function() {
context.drawImage(img,tileX, tileY, tileWidth, tileHeight);
}
})(img, tileX, tileY, tileWidth, tileHeight);
img.src = "http://myserver:8080/images/screen/tile/" +
data.tiles[counter].imageId;
tileX = tileX + parseInt(data.tileWidth);
counter ++;
}
tileY = tileY + parseInt(data.tileHeight);
tileX = 0;
}
}
...
...
</script>
</head>
<body>
...
...
...
...
</body>
</html>
i call this function when i open a new window to draw a canvas in the new window contains an array of images.
problem:
1- Internet explorer 9: draw canvas but it didn't draw images (since the border that i set in the style of the canvas appears).
2- when IE try to get image this error appears
SCRIPT5022: Exception thrown and not caught
index.html, line 1 character 1
3- Opera 12: it didn't display canvas.
Note:
1- this function works fine with Firefox, google chrome, and safari.
2- i am sure that internet explorer are not in compatibility view (F12) and not Quirks mode (it is standards).
any help?
Hmm.. interesting. I think i got a similar problem i'll just tag onto this stack.
After my page is loaded, a function is called to load an image (.png) in an already created canvas element. Half the time in IE this image is not loaded. I gotta hit refresh and eventually it shows up. In firefox & chrome it works on the first try. Sometimes it works on the first try in IE too, but this irregularity is killing me....
function loadCanvas(dataURL) {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
X_max = parseInt($("#container").css('width'));
Y_max = parseInt($("#container").css('height'));
canvas.width = X_max;
canvas.height = Y_max;
ctx.fillStyle="white";
ctx.fillRect(0, 0, X_max, Y_max);
// load image from data url
var imageObj = new Image;
imageObj.onload = function() {
ctx.drawImage(this, 0, 0);
};
imageObj.src = dataURL;
}
If you're calling the draw function after page load, then you will have to replace the document.write(...) as it will create a new page and IE won't complete the image onload handler (unlike as at least chrome).
$("body").append('<div id="screen" style="width:' +
data.maxX + 'px; height:' + data.maxY + 'px; margin: auto;" >' +
'<canvas id="screenCanvas" width=' + data.maxX + ' height=' +
data.maxY + style="border:2px solid #000000;color:#000000;"></canvas</div>')
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="resources/js/jquery-1.7.2.min.js"> </script>
...
...
<script>
...
...
function draw(screen, data) {
var canvas;
if (screen.document.getElementById("screen") == null){
var canvasDiv = screen.document.createElement("div");
canvasDiv.id = "screen";
canvasDiv.style.margin = "0px auto";
canvasDiv.style.width = data.maxX;
canvasDiv.style.height = data.maxY;
canvasDiv.style.border='2px solid black';
screen.document.body.appendChild(canvasDiv);
canvas = screen.document.createElement('canvas');
canvas.setAttribute('width', data.maxX);
canvas.setAttribute('height', data.maxY);
canvas.setAttribute('id', 'screenCanvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
}else{
canvas = screen.document.getElementById('screenCanvas');
}
var context = canvas.getContext('2d');
var tileY = 0;
var tileX = 0;
var counter = 0;
var tileWidth = data.tileWidth;
var tileHeight = data.tileHeight;
for (var i=0;i<(data.maxX/data.tileWidth);i++){
for (var j=0;j<(data.maxY/data.tileHeight);j++){
var img = new Image();
img.onload = (function(img, tileX, tileY, tileWidth, tileHeight){
return function() {
context.drawImage(img,tileX, tileY, tileWidth, tileHeight);
}
})(img, tileX, tileY, tileWidth, tileHeight);
img.src = "http://myserver:8080/images/screen/tile/" +
data.tiles[counter].imageId;
tileX = tileX + parseInt(data.tileWidth);
counter ++;
}
tileY = tileY + parseInt(data.tileHeight);
tileX = 0;
}
}
...
...
</script>
</head>
<body>
...
...
...
...
</body>
</html>
reference: www.williammalone.com
since IE doesn't know what the canvas tag means, and if we used that in our markup, IE would serve us an entrée of error. Instead we create a canvas element in JavaScript.
hope this help you
Related
I am testing line by line resizing and uploading files within a form client-side.
There is a button to select a file, javascript throws an alert about image attributes, resizes the image, assigns it to a hidden field and posts the form. I started with a single image and the relevant code is:
HTML
<form action="add2.php" method="post" enctype="multipart/form-data" id="addform">
<input type="file" id="i1_file" onchange="resize('i1_file', 'addform')" />
<input type="hidden" name="uploadfile" id="image1" value="" />
Javascript
function resize(inputid, formid)
{
var inpFiles = document.getElementById(inputid);
var file = inpFiles.files[0];
... Initial file checks here: type, size etc...
var dataurl = null;
// create <img> element
var img = document.createElement("img");
var reader = new FileReader();
var image = document.getElementById('image1');
// document.write("Before image1 :" + image.name + "<br />");
reader.onloadend = function(e) {
img.src = e.target.result;
img.onload = function() {
// Once you have the image preview in an <img> element, you can draw this image in a <canvas> element to pre-process the file.
var canvas = document.createElement("canvas");
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
var width = img.width;
var height = img.height;
//document.write("src " + img.src + "<br />");
document.write("width " + img.width + "<br />");
document.write("height " + img.height + "<br />");
if ((width > 1024) && (width > height))
{
var new_width = 1024;
var ratio = new_width / width;
var new_height = Math.round(height * ratio);
}
else if (height > 768)
{
var new_height = 768;
var ratio = new_height / height;
var new_width = Math.round(width * ratio);
}
else
{
var new_width = width;
var new_height = height;
}
document.write("new_height: " + new_height + "<br />");
canvas.width = new_width;
canvas.height = new_height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img,0,0,new_width, new_height);
// save canvas as dataUrl
dataurl = canvas.toDataURL("image/jpeg", 0.8);
document.write("FormData " + formid + "<br />");
//document.write("dataurl: " + dataurl + "<br />");
image.value = dataurl;
//var fd = new FormData(document.getElementById(formid));
document.write("Before FormData " + "<br />");
var fd = new FormData(document.forms["addform"]);
var xhr = new XMLHttpRequest();
document.write("Posting <br />" + xhr.readyState );
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// OK
alert('response:'+xhr.responseText);
// here you can use the result (xhr.responseText)
} else {
// not OK
alert('failure!');
}
}
};
xhr.open('POST', 'add2.php', true);
document.write("After Open <br />" + xhr.readyState);
xhr.setRequestHeader("Content-type","multipart/form-data");
document.write("Before Send <br />" );
xhr.send(fd);
console.log(xhr.response);
} //onload
}
reader.readAsDataURL(file);
}
The first browser was Firefox and it hangs after producing this output (i.e. up to xhr.open):
width 4176
height 3120
new_height: 765
FormData addform
Before FormData
Posting
0
Chrome did not redirect at all and stayed on the same page where the form was.
IE10 only output "width 4176" (the very first debugging print).
Can anyone spot what I am doing wrong and why the behaviour is so different in modern browsers?
I have created a chrome extention to take full page screen shot. It is working fine while openening Image element in new window. But I need to display image in Canvas element to allow editing in canvas.
Here is the code for event listener of chrome.tabs.CaptureTab :
background.js
chrome.runtime.onMessage.addListener(
function(request,sender,sendResponse) {
if(Array.isArray(request.image)) {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
image,
done = 0;
canvas.width = request.width;
canvas.height = request.height;
for(var i = 0; i < request.image.length; i++) {
(function(i) {
image = new Image();
image.onload = function() {
context.drawImage(this, 0, request.image[i].position, this.width, this.height);
if(++done == request.image.length) {
screenshot = canvas.toDataURL('image/png');
var htmlCode = "<html><body> Image here: <p><img border=\"2\" src=" + screenshot +"><p> End Image </body></html>";
var url = "data:text/html," + encodeURIComponent(htmlCode);
chrome.tabs.create({url: url});
}
}
image.src = request.image[i].image;
})(i);
}
} else {
var htmlCode = "<html><body> Image here: <p><img border=\"2\" src=" + request.image +"><p> End Image </body></html>";
var url = "data:text/html," + encodeURIComponent(htmlCode);
chrome.tabs.create({url: url});
return;
}
});
Now, I tried :
var htmlCode = "<html><body> Image here: <p><img border=\"2\" src=" + screenshot +"><p> End Image <hr> " + canvas + " </body></html>";
It Gives : [object HTMLCanvasELement]
I need to embed this canvas element while creating the chrome tab
So I solved the same using :
chrome.tabs.create({url:chrome.extension.getURL("../capturetab.html?tabImage=" + request.source )});
capturetab.html :
<html>
<head>
<script type="text/javascript" src="Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Scripts/visibletab.js"></script>
</head>
<body>
<br/><br/>
<canvas id="canvas"></canvas>
<br/><br/>
</body>
</html>
visibketab.js
$( document ).ready(function() {
var imageblob = getUrlParameter('tabImage');
//Set canvas attribute
var myCanvas = document.getElementById('canvas');
var ctx = myCanvas.getContext('2d');
var img = new Image;
img.onload = function(){
// set width and height
ctx.canvas.height = this.height;
ctx.canvas.width = this.width;
ctx.drawImage(img,0,0); // Or at whatever offset you like
};
img.src = imageblob;
});
function getUrlParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}
I am working on a photo editing feature in a mobile angular app and would love help with the crop function in this JSBin http://jsbin.com/kofetuxage/1/edit. Basically, the image is not translating correctly to it's accurate position on the new HTML5 canvas element.
The JSBin is only somewhat functional because I cannot include a link to angular-gestures, so here's the HTML & relevant Javascript. Any help would be most appreciated!
------------ HTML --------------
<html>
<head>
<style>
canvas {
border:1px solid red;
}
.polaroid-crop {
width: 504px;
height: 385px;
border: 1px solid $orange;
overflow: hidden;
}
</style>
</head>
<body>
<p>Canvas (Left) and New clipped PNG (Right)</p>
<canvas id="canvas" width="504" height="385"></canvas>
<p>Original Image</p>
<p><div class="polaroid-crop">
<img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/faces.png"
width="400"
height="234"
ng-style="calcStyle(rotation, scaleFactor, changeY, changeX)"
hm-tap="handleGesture($event)"
hm-double-tap="handleGesture($event)"
hm-hold="handleGesture($event)"
hm-swipe="handleGesture($event)"
hm-drag="drag($event)"
hm-rotate="rotate($event)"
hm-pinch="pinch($event)">
</div></p>
<button ng-click="clipIt()">Click me to clip dragged ones!</button>
</body>
</html>
------------ JAVASCRIPT --------------
'use strict';
angular.module('app.activity', [])
.controller('ActivityCtrl', ['$scope', 'UtilsService', function ($scope, UtilsService) {
$scope.rotation = 0;
$scope.scaleFactor = 1;
$scope.changeX = 0;
$scope.changeY = 0;
$scope.negativeChangeX = 0;
$scope.negativeChangeY = 0;
$scope.absX = 0;
$scope.absY = 0;
$scope.rotationRadian = 0;
$scope.canvasWidth = 504;
$scope.canvasHeight = 385;
$scope.imgWidth = 400;
$scope.imgHeight = 234;
$scope.rotate = function(event) {
console.log('rotation data', event);
$scope.type = event.type;
$scope.rotation = event.gesture.rotation % 360;
$scope.rotationAngle = event.gesture.rotation; // this was not working when it was getting angle instead of rotation
$scope.changeX = event.gesture.deltaX;
$scope.changeY = event.gesture.deltaY;
$scope.negativeChangeX = -(event.gesture.deltaX);
$scope.negativeChangeY = -(event.gesture.deltaX);
$scope.absX=Math.abs(event.gesture.deltaX);
$scope.absY=Math.abs(event.gesture.deltaY);
event.gesture.preventDefault();
// event.gesture.stopPropagation();
};
$scope.pinch = function(event) {
if (event.gesture.scale != 1) {
console.log('what does pinching return');
$scope.type = event.type;
$scope.scaleFactor = event.gesture.scale;
$scope.changeX = event.gesture.deltaX;
$scope.changeY = event.gesture.deltaY;
$scope.negativeChangeX = -(event.gesture.deltaX);
$scope.negativeChangeY = -(event.gesture.deltaX);
$scope.absX=Math.abs(event.gesture.deltaX);
$scope.absY=Math.abs(event.gesture.deltaY);
// event.gesture.preventDefault();
event.preventDefault();
// event.stopPropagation();
}
};
$scope.drag = function(event) {
$scope.type = event.type;
console.log('deltaX', event.gesture.deltaX, 'and deltaY', event.gesture.deltaY);
$scope.changeX = event.gesture.deltaX;
$scope.changeY = event.gesture.deltaY;
$scope.negativeChangeX = -(event.gesture.deltaX);
$scope.negativeChangeY = -(event.gesture.deltaY);
$scope.absX=Math.abs(event.gesture.deltaX);
$scope.absY=Math.abs(event.gesture.deltaY);
};
$scope.type = '--';
$scope.handleGesture = function($event) {
console.log('and the event type is', $event.type)
$scope.type = $event.type;
};
// from codedrops html crop example at http://tympanus.net/codrops/2014/10/30/resizing-cropping-images-canvas/
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
$scope.calcStyle = function (rotation, scaleFactor, changeY, changeX) {
var style = {};
style.transform = [
'rotate(' + rotation + 'deg)',
'scale(' + scaleFactor + ')',
'translateY(' + changeY + 'px)',
'translateX(' + changeX + 'px)'
].join(' ');
return style;
};
$scope.clipIt = function () {
$scope.clipImage(img, $scope.changeX, $scope.changeY, $scope.canvasWidth, $scope.canvasHeight);
}
img.crossOrigin = "anonymous";
img.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/faces.png";
$scope.clipImage = function(image, clipX, clipY, clipWidth, clipHeight) {
console.log('clipImage()', arguments, $scope.rotationAngle);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
if($scope.rotationAngle) {
// ctx.translate(0,0); // ps. this kinda worked
ctx.translate($scope.changeX, $scope.changeY); // moving the origin of the coordinate system to the current rendering context
ctx.translate($scope.imgWidth/2, $scope.imgHeight/2);
ctx.rotate(($scope.rotationAngle * (Math.PI / 180)));
ctx.translate(-$scope.changeX, -$scope.changeY);
ctx.translate(-$scope.imgWidth/2, -$scope.imgHeight/2);
}
if($scope.scaleFactor) {
ctx.scale($scope.scaleFactor, $scope.scaleFactor);
}
ctx.drawImage(
image,
-clipX,
-clipY,
clipWidth,
clipHeight,
clipX,
clipY,
clipWidth,
clipHeight
);
ctx.restore();
// var clippedImg = document.getElementById("clipped");
// clippedImg.src = canvas.toDataURL();
}
}]);
Well, I have this code:
http://jsfiddle.net/hv9gB/3/
(function() {
var img = document.getElementById('my_image');
// Original
var width, height;
// Display
var d_width = img.width;
var d_height = img.height;
var updateDetail = function() {
document
.getElementById('display_size')
.innerHTML = 'Display Size: ' + d_width + ' x ' + d_height;
document
.getElementById('native_size')
.innerHTML = 'Original Size: ' + width + ' x ' + height;
};
// Using naturalWidth/Height
if (img.naturalWidth) {
width = img.naturalWidth;
height = img.naturalHeight;
updateDetail();
} else {
// Using an Image Object
img = new Image();
img.onload = function() {
width = this.width;
height = this.height;
updateDetail();
};
img.src = 'http://lorempixel.com/output/nature-q-c-640-480-3.jpg';
}
}());
And that is my site:
http://dhems.x10.mx/
But on my site isn't working show the width and height of image
Why?!?!
Put your code in
window.onload = function() {
//insert code here
}
Your js file is executed before the engine reach the picture..You're getting the following console error:
Uncaught TypeError: Cannot read property 'width' of null
It's also a good practice to put all scripts files in the end of the page and all css files in the begin. It will increase the loading time of your page, because if JS files are in the begin, your browser won't start to render until these files are downloaded.
your code should look like:
window.onload = function() {
var img = document.getElementById('my_image');
// Original
var width, height;
// Display
var d_width = img.width;
var d_height = img.height;
var updateDetail = function() {
document
.getElementById('display_size')
.innerHTML = 'Display Size: ' + d_width + ' x ' + d_height;
document
.getElementById('native_size')
.innerHTML = 'Original Size: ' + width + ' x ' + height;
};
// Using naturalWidth/Height
if (img.naturalWidth) {
width = img.naturalWidth;
height = img.naturalHeight;
updateDetail();
} else {
// Using an Image Object
img = new Image();
img.onload = function() {
width = this.width;
height = this.height;
updateDetail();
};
img.src = 'http://lorempixel.com/output/nature-q-c-640-480-3.jpg';
}
}
Move the script tag after the image in HTML. Script gets executed before the image goes into page.
Put the code at the bottom of your <body> in a <script type='text/javascript'> or use window.onload. If you have other things loading onload the first option is your best choice, otherwise use this code:
<script type='text/javascript'>
(function(){
var pre = window.onload;
onload = function(){
if(pre)pre();
//other code here
}
})();
</script>
This example can be used in your <head>.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
function readImage(file) {
var reader = new FileReader();
var image = new Image();
reader.readAsDataURL(file);
reader.onload = function(_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function() {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~~(file.size/1024) +'KB';
$('#uploadPreview').append('<img src="'+ this.src +'"> '+w+'x'+h+' '+s+' '+t+' '+n+'<br>');
};
image.onerror= function() {
alert('Invalid file type: '+ file.type);
};
};
}
$("#choose").change(function (e) {
if(this.disabled) return alert('File upload not supported!');
var F = this.files;
if(F && F[0]) for(var i=0; i<F.length; i++) readImage( F[i] );
});
</script>
<meta charset=utf-8 />
<title>Multiple image upload with preview by Roko C.B.</title>
</head>
<body>
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>
</body>
</html>
i have a JavaScript project (using jquery), inside it i draw a canvas by code and then i insert array of images on it. it represents fine without any error.
problem: later on, i try to get these images inside from canvas to compare if they have the same src or the same id to don't replace it with the new image
my functions are:
var inter;
var screen;
function onClick(id){
getScreen(id, function(data){
screen=window.open('',id,'width=' + data.maxX + ',height=' + data.maxY , true);
if (screen.document.getElementById("screen") != null ){
screen.document.getElementById("screen").innerHTML = "";
}
screen.document.write('<div id="screen"><canvas id="screenCanvas" width=' +
data.maxX + ' height=' + data.maxY +
' style="border:2px solid #000000;color:#000000;" ></canvas></div>');
draw(data);
inter = setInterval(function(){screen(id); }, 5000);
});
}
function screen(id){
getScreen(id, function(data){
if (screen.closed == true){
clearInterval(inter);
return;
}
if((screen.document.getElementById('screenCanvas').width != data.maxX) ||
(data.maxY != screen.document.getElementById('screenCanvas').height)){
screen.close();
screen=window.open('',id,'width=' + data.maxX + ',height=' + data.maxY , true);
screen=window.open('',id,'width=' + data.maxX + ',height=' + data.maxY , true);
if (screen.document.getElementById("screen") != null ){
screen.document.getElementById("screen").innerHTML = "";
}
screen.document.write('<div id="screen"><canvas id="screenCanvas" width=' +
data.maxX + ' height=' + data.maxY +
' style="border:2px solid #000000;color:#000000;" ></canvas></div>');
draw(data);
});
}
function draw(data) {
var canvas = screen.document.getElementById('screenCanvas');
var context = canvas.getContext('2d');
var tileY = 0;
var tileX = 0;
var counter = 0;
var tileWidth = data.tileWidth;
var tileHeight = data.tileHeight;
for (var i=0;i<(data.maxX/data.tileWidth);i++){
for (var j=0;j<(data.maxY/data.tileHeight);j++){
var img = new Image();
img.onload = (function(img, tileX, tileY, tileWidth, tileHeight){
return function() {
context.drawImage(img,tileX, tileY, tileWidth, tileHeight);
}
})(img, tileX, tileY, tileWidth, tileHeight);
img.src = "http://myserver:8080/images/screen/tile/" +
data.tiles[counter].imageId;
tileX = tileX + parseInt(data.tileWidth);
counter ++;
}
tileY = tileY + parseInt(data.tileHeight);
tileX = 0;
}
}
</script>
this code gets an array (data) that contains list of (id, maxX, maxY, tileWidth, tileHeight, tiles[x, y, imageId]) and open new window, then write in this window the canvas code and draw images then calls a timer to work each 5 seconds. after each 5 seconds, screen method calls to re-get the data again and check if screen open then it remove all inner html to rewrite new canvas, and it tests if sizes changes.
this code works fine without any error, but i need to edit these code to get images inside canvas and test it they has the same imageId, don't download it again.(i don't save image id, to get images by, we can store it in img.id, or get images by src since, imageId is a part of image path that makes it unique).
Note:
id[unique](is the id of the user),
maxX(maximum width of the screen),
maxY(maximum height of the screen),
tileWidth(width of each image),
tileHeight(height of each image),
tiles(list of images)
x(left position of the image)
y(top postion of the image)
imageId[unique](id of each image)
example: data[id:1,maxX:1920,maxY:1080,tileWidth:480,tileHeight:270,tiles:(x:2,y:1,imageId:1a)]
any help?
as Ravi Jain said you can't get the image drawn to canvas object, and as robertc said you can use img element.
try these functions that specify the usage of img element not canvas:
function onClick(id){
getScreen(id, function(data){
var inter;
var screen;
var width = parseInt(data.maxX) + parseInt(data.tileWidth);
var height = parseInt(data.maxY) + parseInt(data.tileHeight);
screen=window.open('',id,'width=' + width + ',height=' + height , true);
draw(screen, data);
inter = setInterval(function(){screen(screen, inter, id); }, 5000);
});
}
function screen(screen, inter, id){
getScreen(id, function(data){
if (screen.closed == true){
clearInterval(inter);
return;
}
if((screen.document.getElementById("screen").style.width != data.maxX + "px") ||
(screen.document.getElementById("screen").style.height != data.maxY + "px")){
screen.close();
var width = parseInt(data.maxX) + parseInt(data.tileWidth);
var height = parseInt(data.maxY) + parseInt(data.tileHeight);
screen=window.open('',id,'width=' + width + ',height=' + height , true);
}
draw(screen, data);
});
}
function draw(screen, data) {
var screenDiv = screen.document.getElementById("screen");
if (screenDiv == null) screen.document.write('<div id="screen" style="width:' +
data.maxX + '; height:' + data.maxY + '; " style="margin: 0 auto;" >');
var tileY = 0;
var tileX = 0;
var counter = 0;
for (var i=0;i<(data.maxX/data.tileWidth);i++){
for (var j=0;j<(data.maxY/data.tileHeight);j++){
var imageSource = screen.document.getElementById("id_" + counter);
var path = "http://myserver:8080/images/screen/tile/" +
data.tiles[counter].imageId;
if (imageSource == null){
screen.document.write('<img id="id_' + counter + '" src="' + path +
'" height="' + data.tileHeight + '" width="' + data.tileWidth + '" />');
}else if(imageSource.src != path){
imageSource.src = path;
}
tileX = tileX + parseInt(data.tileWidth);
counter ++;
}
tileY = tileY + parseInt(data.tileHeight);
tileX = 0;
}
if (screenDiv == null) screen.document.write('</div>');
}
</script>
your code are working fine that's true, but for one instance only, you declare var screen and var inter at the top of the script not in the function, this means that if you click on the first user to get it's screen (as what i understood of your code, what your project did), the timer of the first user stops and of the second user starts. this code that i wrote solve this problem and your problem to replace the source of the image if it changes.
hope this help you man,
GOOD LUCK;
Once you've drawn something on canvas it's pixels. It doesn't retain the object that was used to create those pixels. If you want this sort of information then you either need to maintain it yourself outside of canvas, or use something which retains objects for you like SVG.