|
Post by kokenge on Aug 31, 2009 13:26:33 GMT -5
For some reason this code will not display the image on the <canvas>. I draw a funny face and that shows up. Actually I'm in full screen mode and when I click the Run Basic "Exit full screen mode" it shows up. I do a html "<IMG SRC='";imagePath$;"2c.gif'>" at the end of the code just to prove the image exist. It does.. projectDir$ = "a_project" imagePath$ = "../";projectDir$;"/image/"
html "<canvas id='canvas' width='150' height='150' style='border: 1px #000 solid;'></canvas>" html "<script> var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.src = '";imagePath$;"2c.gif'; </script> " html "<script> ctx.clearRect (0, 0, 150, 150); ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise) ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye ctx.stroke(); ctx.drawImage(img,0,0); // ***** No Image? </script>"
' this is just to prove the image is there - It shows up. html "<IMG SRC='";imagePath$;"2c.gif'>" wait
Thanks for the help.. If you want to test this you can set projectDir$ = "Your Project Path" imagePath$ = "../";projectDir$;"/Your subDirectroy image path/" And change 2c.gif to any image you have.
|
|
|
Post by StefanPendl on Aug 31, 2009 13:54:46 GMT -5
The default working folder for images and such is the public folder, so I would try imagePath$ = "../projects/";projectDir$;"/image/"
|
|
|
Post by StefanPendl on Aug 31, 2009 14:33:45 GMT -5
The following works with the mandelbrot.JPG in the public folder. I commented out the path you might need to use.
I used END to get rid of the restart confirmation.
rojectDir$ = "a_project" 'imagePath$ = "/../projects/";projectDir$;"/image/" imagePath$ = "/"
html "<canvas id='canvas' width='150' height='150' style='border: 1px #000 solid;'></canvas>" html "<script type='text/javascript' language='JavaScript'> var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.src = '";imagePath$;"mandelbrot.jpg'; </script> " html "<script type='text/javascript' language='JavaScript'> ctx.clearRect (0, 0, 150, 150); ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise) ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye ctx.stroke(); ctx.drawImage(img,0,0); // ***** No Image? </script>"
' this is just to prove the image is there - It shows up. html "<IMG SRC='";imagePath$;"mandelbrot.jpg'>" end
|
|
|
Post by StefanPendl on Aug 31, 2009 14:34:46 GMT -5
The following keeps the smiley visible.
rojectDir$ = "a_project" 'imagePath$ = "/../projects/";projectDir$;"/image/" imagePath$ = "/"
html "<canvas id='canvas' width='150' height='150' style='border: 1px #000 solid;'></canvas>" html "<script type='text/javascript' language='JavaScript'> var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.src = '";imagePath$;"mandelbrot.jpg'; </script>" html "<script type='text/javascript' language='JavaScript'> ctx.clearRect (0, 0, 150, 150); ctx.drawImage(img,0,0); ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise) ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye ctx.stroke(); </script>"
' this is just to prove the image is there - It shows up. html "<br/><IMG SRC='";imagePath$;"mandelbrot.jpg'>" end
|
|
|
Post by kokenge on Aug 31, 2009 15:19:38 GMT -5
Hmmmmm! What browser are you using? I'm using Chrome and can't get your code to work. The image shows up at the bottom - just like the original code. I only did that to probe the image is there and RB can display it normally.. But it does not show up in the <canvas> box. Since I did not clear the box the image should show up on top of the face. It only shows up when I click "Exit full screen mode" at the top. I have about 20 projects and my standards require each project to have a /image directory among others. Never had a problem with this standard. Just to risky having all the projects work out of a single public directory. I'm thinking it may work if I can put this in the heading.. html "<canvas id='canvas' width='150' height='150' style='border: 1px #000 solid;'></canvas>" html "<script type='text/javascript' language='JavaScript'> var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.src = '";imagePath$;"mandelbrot.jpg'; </script>"
I forgot the code to do this, so will look it up and get back. Thanks for the help.
|
|
|
Post by kokenge on Aug 31, 2009 16:56:46 GMT -5
Interesting... Just tried it in Opera and FireFox and it works.
I'll see if I can get a later version of Chrome.. Else I'll do the development in FireFox or Opera...
Thanks for the help everyone...
|
|
|
Post by StefanPendl on Sept 1, 2009 2:20:33 GMT -5
You can create a sub-folder for each project to have the public files in one place.
Personally, I do not like public web content inside a folder tree, which is more or less confidential.
You can find my specifications in my signature.
|
|
|
Post by StefanPendl on Sept 1, 2009 2:44:13 GMT -5
IE does not support the canvas tag, so you should include a check to avoid an error. rojectDir$ = "a_project" 'imagePath$ = "/../projects/";projectDir$;"/image/" imagePath$ = "/"
html "<canvas id='canvas' width='150' height='150' style='border: 1px #000 solid;'>Your Browser does not support the canvas tag.</canvas>" html "<script type='text/javascript' language='JavaScript'> try { var cvs = document.getElementById('canvas'); var ctx = cvs.getContext('2d'); var img = new Image(); img.src = '";imagePath$;"mandelbrot.jpg'; ctx.clearRect (0, 0, 150, 150); ctx.drawImage(img,0,0); ctx.beginPath(); ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle ctx.moveTo(110,75); ctx.arc(75,75,35,0,Math.PI,false); // Mouth (clockwise) ctx.moveTo(65,65); ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye ctx.moveTo(95,65); ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye ctx.stroke(); } catch (er) {} </script>"
' this is just to prove the image is there - It shows up. html "<br/><IMG SRC='";imagePath$;"mandelbrot.jpg'>" end
There seems to be a problem when run first in FF too, because the image does not show. May be you should try to adapt the code to follow the outline of the example at W3C Schools.
|
|
|
Post by kokenge on Sept 1, 2009 4:22:44 GMT -5
Yep! IE is way behind in adaption of standards. All my projects up front have a statement saying that use of IE will give you unpredictable results, if it works at all. And they all test for IE.
I'm aware that IE is just beginning to support HTML5. It's surprising that Chrome is having problems with the <canvas> tag. They are very aggressive in adoption of HTML5. I downloaded Chrome Beta and it still does not work.
However the project I'm writing is very busy painting graphics and loading images with about 20 canvas areas on the screen. So far the test are working as expected using FF and Opera..
Thanks for the help.
|
|
|
Post by kokenge on Sept 27, 2009 8:14:35 GMT -5
Just an update. This was driving me crazy, because it seem random when drawing images.
The reason sometimes it does not draw the image is because when you create a new image: var img = new Image(); img.src = 'yourImage.jpg';
and then try to draw the contest to the Canvass: context.drawImage (img,0,0); it may not be loaded to cache yet.
JS does not check to see if it's loaded and you may not get the image on the Canvas depending if it's in cache or not.
However if you do an onload function() it checks if it's in cache, and if not waits for it to be loaded before drawing: img.onload = function(){ context.drawImage (img,0,0); }
This is why sometimes it worked because some images were in cache. Especially if you ran your code a second time because it cached it on your first run. Wow!
I tested this in all browsers except IE. IE does not support HTML-5 yet.
Dan
|
|