These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:11 pm Advanced search

Canvas Image not loading

Here you can discuss things related to HTML and the Web in general that do not fit in to other categories.

Canvas Image not loading

Postby chronmon » Tue Jul 06, 2010 5:29 pm

I'm trying to load an image into my canvas using the following code:

Code: Select all
<!DOCTYPE HTML>

<html>

<head>
<title>Hello Intranets Canvas Example</title>
</head>

<body>

<h1>Canvas Example 1</h1>

<img src="helloi.gif" width="133" height="100">

<canvas id="FirstCanvas" width="400" height="100" style="border:3px solid #000000;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
var c=document.getElementById("FirstCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="http://192.168.0.192/helloi.gif"
cxt.drawImage(img,20,0);
</script>

</body>

</html>


The image loads with <img> tag. The canvas also loads but the image that canvas displays does not load. There is one exception if i browse to the image before i load the page, the canvas will display the image.

Can anybody give me hand in fixing this problem?
chronmon
<h6>
 
Posts: 4
Joined: Tue Jul 06, 2010 5:19 pm

Postby chronmon » Tue Jul 06, 2010 5:30 pm

Sorry about the double post. Can a mod delete this extra post.
chronmon
<h6>
 
Posts: 4
Joined: Tue Jul 06, 2010 5:19 pm

Postby JAB Creations » Tue Jul 06, 2010 5:47 pm

A few things...

First not sure why you disabled BBcode, the post looks fine with it enabled and it's much more readable this way.

Second people need to stop referencing elements as tags.

<element attribute="value" />

<tag_opening></tag_closing>

When referencing HTML elements please use the word element.

Third I deleted the double post for you.

Fourth avoid using double quotes in JavaScript.

Fifth don't put script elements in the body element, it's really bad practices and encourages things like document.write and innerHTML among other things which are horribly unreliable.

Sixth end your JavaScript lines with semi-colons, being strict with your code will pay out in the end.

Lastly I don't know much about Canvas though I have cleaned up the document for you. Save this to a file with an xhtml extension...

Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Canvas Example</title>
<script type="text/javascript">
//<![CDATA[

var c=document.getElementById('example');
var cxt=c.getContext('2d');
var img=new Image();
img.src='http://www.whatwg.org/images/logo';
cxt.drawImage(img,20,0);

//]]>
</script>
</head>

<body>

<h1>Canvas Example 1</h1>
<div>
<img src="helloi.gif" width="133" height="100" />

<canvas id="example" width="400" height="100" style="border:3px solid #000000;">
Your browser does not support the canvas element.
</canvas>
</div>

</body>
</html>


XHTML is stricter but if you screw up your code it'll be much easier to fix your code.

As far as doing this in general you'll need someone else who knows how to work with Canvas.

I tested this in Safari since Apple came up with the canvas element (I think offhand?) and the developer console was spawning some errors so start with that.
User avatar
JAB Creations
<aside>
 
Posts: 566
Joined: Tue Mar 13, 2007 4:48 am
Location: Sarasota Florida, USA

Postby zcorpan » Tue Jul 06, 2010 7:27 pm

JAB Creations wrote:Second people need to stop referencing elements as tags.
Or maybe you should stop fighting the windmills and not care about it? :)

JAB Creations wrote:Fourth avoid using double quotes in JavaScript.
Why? There's nothing wrong with double quotes in javascript.

JAB Creations wrote:Fifth don't put script elements in the body element, it's really bad practices and encourages things like document.write and innerHTML among other things which are horribly unreliable.
No it doesn't. In fact putting scripts elements last in body is good practice because the page renders faster.

JAB Creations wrote:Sixth end your JavaScript lines with semi-colons, being strict with your code will pay out in the end.
A case where it matters is if the next line starts with an opening paranthesis.

JAB Creations wrote:Lastly I don't know much about Canvas though I have cleaned up the document for you.
I think chronmon's markup looks cleaner. Also moving the script to head makes it fail since when the script is run the canvas element is not yet parsed.

JAB Creations wrote:I tested this in Safari since Apple came up with the canvas element (I think offhand?) and the developer console was spawning some errors so start with that.
This was the only helpful piece of information in your post. :) Could you please be nicer to newcomers and not dictate how they should write their stuff and instead try to help them with their problems?
Last edited by zcorpan on Tue Jul 06, 2010 7:32 pm, edited 1 time in total.
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden

Re: Canvas Image not loading

Postby zcorpan » Tue Jul 06, 2010 7:29 pm

chronmon wrote:I'm trying to load an image into my canvas using the following code:

You need to wait until the image has loaded before painting it on the canvas.
Code: Select all
img.onload = function(e) {
  cxt.drawImage(img,20,0);
}
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden

Postby chronmon » Tue Jul 06, 2010 9:19 pm

Thanks for the help guys, im going to try this after class today and see if i can get it working.
chronmon
<h6>
 
Posts: 4
Joined: Tue Jul 06, 2010 5:19 pm

Re: Canvas Image not loading

Postby chronmon » Wed Jul 07, 2010 2:09 am

zcorpan wrote:
chronmon wrote:I'm trying to load an image into my canvas using the following code:

You need to wait until the image has loaded before painting it on the canvas.
Code: Select all
img.onload = function(e) {
  cxt.drawImage(img,20,0);
}


Alright added this too the script and it now works. Thanks
chronmon
<h6>
 
Posts: 4
Joined: Tue Jul 06, 2010 5:19 pm


Return to General Discussion

Who is online

Users browsing this forum: No registered users and 2 guests