Can't remove alert or script breaks [Archive]

View Full Version : Can't remove alert or script breaks

TinyScript

05-12-2009, 01:14 AM

I have to be doing something wrong. Please take a look and see if you can help me figure out how to pass the image.src and draw it to the canvas in my loop without stopping for an alert each time.
http://h1.ripway.com/stirfry/javascript/tests/canvas/mapdraw/DrawonmapTest.html

FF canvas only.... maybe opera, haven't tested it
draw on the map and them right click to save it.

Send directions using the Gmap images you want to use.

here's the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html><head><title>Scribble</title>

<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
<script language="javascript">

function draw_thumb() {
var canvas = document.getElementById("canvas");
var thumb = document.getElementById("thumb");

var ctx = thumb.getContext("2d");
ctx.drawImage(canvas, 0, 0, 100, 100);
}
function transform_event_coord(e) {
return {x: e.clientX - 10, y: e.clientY - 10};
}
var drawing = false;
var lastpos = {x:-1,y:-1};
function on_mousedown(e) {
drawing = true;
lastpos = transform_event_coord(e);
}
function on_mousemove(e) {
if (!drawing)
return;

var pos = transform_event_coord(e);

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.strokeStyle = "rgba(200,0,0,0.6)";
ctx.lineWidth = 4.0;
//ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(lastpos.x, lastpos.y);
ctx.lineTo(pos.x, pos.y);
ctx.closePath();
ctx.stroke();

lastpos = pos;
}
function on_mouseup(e) {
drawing = false;
draw_thumb();
}
function init() {
var arry=[2610,2611,2612,2613];
var arry2=[5856,5857,5858,5859];
var imageSrcArray=new Array()
for (i in arry){for(j in arry2){

imageSrcArray.push('http://mt0.google.com/mt/v=ap.92&hl=en&x='+arry[j]+'&y='+arry2[i]+'&z=14&s=Galileo')

}};
//alert(imageSrcArray)

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var im = new Image();
for(i in imageSrcArray) {
im.src=imageSrcArray[i];

if(i<4){alert(im.src);ctx.drawImage(im, i*256, 0)}
if(3<i<8){alert(im.src);ctx.drawImage(im,256*(i-4),256)}
if(7<i<12){alert(im.src);ctx.drawImage(im, 256*(i-8), 512)}
if(11<i<16){alert(im.src);ctx.drawImage(im, 256*(i-12), 768)}

//alert(im.src);ctx.drawImage(im, i*256, (i/4)*256)

}
addEventListener("mousedown", on_mousedown, false);
addEventListener("mousemove", on_mousemove, false);
addEventListener("mouseup", on_mouseup, false);
draw_thumb();
}
</script></head><body onload="init()">
<img id="ie" style="display: none;" src="image.jpg">

<canvas id="canvas" width="1024" height="1024"></canvas>
<canvas id="thumb" width="100" height="100" style="position:absolute;top:10px;left:10px;z-index:2;"></canvas>

</body></html>

A1ien51

05-12-2009, 02:44 AM

You are trying to reference the canvas before it is rendered.

Eric

rnd me

05-12-2009, 05:34 AM

actually, the problem is that the image has not loaded when you use it.
an alert pauses everything, giving the image time to load, appearing to fix the problem.

you can't really do it procedurally like you have it, you need asynchrouous code to allow for the images to come in.

here is a new init function that should work:

function init() {
var arry=[2610,2611,2612,2613];
var arry2=[5856,5857,5858,5859];
var imageSrcArray=[];
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var arrived= 0; // how many images have arrived?

for (i in arry){
for(j in arry2){
imageSrcArray.push('http://mt0.google.com/mt/v=ap.92&hl=en&x='+arry[j]+'&y='+arry2[i]+'&z=14&s=Galileo')
}//next j
}//next i

var mx=imageSrcArray.length;

for(var i=0; i<mx; i++){

var im = new Image();
var i2=Number(i);

im.onload=function(){
if(i2<4) {ctx.drawImage(im, i2*256, 0)}
if(3<i2<8){ctx.drawImage(im,256*(i2-4),256)}
if(7<i2<12){ctx.drawImage(im, 256*(i2-8), 512)}
if(11<i2<16){ctx.drawImage(im, 256*(i2-12), 768)}
if(++arrived==mx){ draw_thumb();}
}//end onload()

im.src=imageSrcArray[i];

}//next i

addEventListener("mousedown", on_mousedown, false);
addEventListener("mousemove", on_mousemove, false);
addEventListener("mouseup", on_mouseup, false);

}//end init()

closure saves us a lot of recoding and state maintanance. the only unkown is when the last images will arrive, and which image that will be. I added a counter to count the incoming images, and when all of them are in, then it fires your draw_thumb.

capichè?

TinyScript

05-12-2009, 06:00 AM

Did I use your code wrong? It only draws one image in the bottom right corner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html><head><title>Scribble</title>

<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
<script language="javascript">

function draw_thumb() {
var canvas = document.getElementById("canvas");
var thumb = document.getElementById("thumb");

var ctx = thumb.getContext("2d");
ctx.drawImage(canvas, 0, 0, 100, 100);
}
function transform_event_coord(e) {
return {x: e.clientX - 10, y: e.clientY - 10};
}
var drawing = false;
var lastpos = {x:-1,y:-1};
function on_mousedown(e) {
drawing = true;
lastpos = transform_event_coord(e);
}
function on_mousemove(e) {
if (!drawing)
return;

var pos = transform_event_coord(e);

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.strokeStyle = "rgba(200,0,0,0.6)";
ctx.lineWidth = 4.0;
//ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(lastpos.x, lastpos.y);
ctx.lineTo(pos.x, pos.y);
ctx.closePath();
ctx.stroke();

lastpos = pos;
}
function on_mouseup(e) {
drawing = false;
draw_thumb();
}
function init() {
var arry=[2610,2611,2612,2613];
var arry2=[5856,5857,5858,5859];
var imageSrcArray=[];
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var arrived= 0; // how many images have arrived?

for (i in arry){
for(j in arry2){
imageSrcArray.push('http://mt0.google.com/mt/v=ap.92&hl=en&x='+arry[j]+'&y='+arry2[i]+'&z=14&s=Galileo')
}//next j
}//next i

var mx=imageSrcArray.length;

for(var i=0; i<mx; i++){

var im = new Image();
var i2=Number(i);

im.onload=function(){
if(i2<4) {ctx.drawImage(im, i2*256, 0)}
if(3<i2<8){ctx.drawImage(im,256*(i2-4),256)}
if(7<i2<12){ctx.drawImage(im, 256*(i2-8), 512)}
if(11<i2<16){ctx.drawImage(im, 256*(i2-12), 768)}
if(++arrived==mx){ draw_thumb();}
}//end onload()

im.src=imageSrcArray[i];

}//next i

addEventListener("mousedown", on_mousedown, false);
addEventListener("mousemove", on_mousemove, false);
addEventListener("mouseup", on_mouseup, false);

}//end init()
</script></head><body onload="init()">
<img id="ie" style="display: none;" src="image.jpg">

<canvas id="canvas" width="1024" height="1024"></canvas>
<canvas id="thumb" width="100" height="100" style="position:absolute;top:10px;left:10px;z-index:2;"></canvas>

</body></html>

TinyScript

05-12-2009, 06:04 AM

here's the original script. found here
http://ponderer.org/download/canvas_demo/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html><head><title>Scribble</title>

<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
<script language="javascript">
function draw_thumb() {
var canvas = document.getElementById("canvas");
var thumb = document.getElementById("thumb");

var ctx = thumb.getContext("2d");
ctx.drawImage(canvas, 0, 0, 100, 100);
}
function transform_event_coord(e) {
return {x: e.clientX - 10, y: e.clientY - 10};
}
var drawing = false;
var lastpos = {x:-1,y:-1};
function on_mousedown(e) {
drawing = true;
lastpos = transform_event_coord(e);
}
function on_mousemove(e) {
if (!drawing)
return;

var pos = transform_event_coord(e);

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.strokeStyle = "rgba(200,0,0,0.6)";
ctx.lineWidth = 4.0;
//ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(lastpos.x, lastpos.y);
ctx.lineTo(pos.x, pos.y);
ctx.closePath();
ctx.stroke();

lastpos = pos;
}
function on_mouseup(e) {
drawing = false;
draw_thumb();
}
function init() {
var ie = document.getElementById("ie");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.drawImage(ie, 120, 120);

addEventListener("mousedown", on_mousedown, false);
addEventListener("mousemove", on_mousemove, false);
addEventListener("mouseup", on_mouseup, false);
draw_thumb();
}
</script></head><body onload="init()">
<img id="ie" style="display: none;" src="ie-logo.jpg">
<canvas id="canvas" width="400" height="400"></canvas>
<canvas id="thumb" width="100" height="100"></canvas>

</body></html>

rnd me

05-12-2009, 07:18 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html><head><title>Scribble</title>

<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
<script language="javascript">

function draw_thumb() {
var canvas = document.getElementById("canvas");
var thumb = document.getElementById("thumb");

var ctx = thumb.getContext("2d");
ctx.drawImage(canvas, 0, 0, 100, 100);
}
function transform_event_coord(e) {
return {x: e.clientX - 10, y: e.clientY - 10};
}
var drawing = false;
var lastpos = {x:-1,y:-1};
function on_mousedown(e) {
drawing = true;
lastpos = transform_event_coord(e);
}
function on_mousemove(e) {
if (!drawing)
return;

var pos = transform_event_coord(e);

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.strokeStyle = "rgba(200,0,0,0.6)";
ctx.lineWidth = 4.0;
//ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(lastpos.x, lastpos.y);
ctx.lineTo(pos.x, pos.y);
ctx.closePath();
ctx.stroke();

lastpos = pos;
}
function on_mouseup(e) {
drawing = false;
draw_thumb();
}
function init() {
var arry=[2610,2611,2612,2613];
var arry2=[5856,5857,5858,5859];
var imageSrcArray=[];
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var arrived= 0; // how many images have arrived?

for (var i in arry){
for(j in arry2){
imageSrcArray.push('http://mt0.google.com/mt/v=ap.92&hl=en&x='+arry[j]+'&y='+arry2[i]+'&z=14&s=Galileo')
}//next j
}//next i

var mx=imageSrcArray.length;
for(var i=0; i<mx; i++){

var im = new Image();
im.num=i;

im.onload=function(){
var im=this, i2=im.num;
if(i2<4) {ctx.drawImage(im, i2*256, 0)}
if(3<i2<8){ctx.drawImage(im,256*(i2-4),256)}
if(7<i2<12){ctx.drawImage(im, 256*(i2-8), 512)}
if(11<i2<16){ctx.drawImage(im, 256*(i2-12), 768)}
if(++arrived==mx){ draw_thumb();}
}//end onload()

im.src=imageSrcArray[i];

}//next i

addEventListener("mousedown", on_mousedown, false);
addEventListener("mousemove", on_mousemove, false);
addEventListener("mouseup", on_mouseup, false);

}//end init()
</script></head><body onload="init()">
<img id="ie" style="display: none;" src="image.jpg">

<canvas id="canvas" width="1024" height="1024"></canvas>
<canvas id="thumb" width="100" height="100" style="position:absolute;top:10px;left:10px;z-index:2;"></canvas>

</body></html>

still not 100% sure why the first one didn't work...
i'm used to [].map for loops...

anyway, changes in red.

tested ff3

TinyScript

05-12-2009, 11:33 AM

I owe you you big time!! awesome.