Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Adding an image to a HTML canvas

ihannibal

New Coder
Hi everyone,

I'm trying to add an image to a HTML canvas, just trying this out and pulling it from Wikipedia but I can't for the life of me get it to work. Has anyone got any suggestions why this might be? Code below, thanks in advance!

HTML:
<html>


<canvas id="gameCanvas" width="800" height="600">


</canvas>


<script>


var canvas;

var canvasContext;


window.onload = function()   {

canvas = document.getElementById('gameCanvas');

canvasContext = canvas.getContext('2d');

canvasContext.fillStyle = 'black';

canvasContext.fillRect(0,0,canvas.width, canvas.height)

}


var image = new Image();

image.src = 'https://upload.wikimedia.org/wikipedia/commons/4/4c/Catopsbaatar.jpg';

ctx.drawImage(image, 0, 0, 40, 40);


</script>


</html>
 
Last edited by a moderator:
Hello,

Please use our BBcode feature when sharing your code. Click (...) while in editor, and select Code.

Have a look at Mozilla Developer Network, and see if you find what you’re looking for :)
 
I don't have any experience working with HTML's canvas element, but before you continue any further, I'd suggest fixing your image that you've linked. Clicking on it leads to an error for some reason, saying "file not found".
 
Yeah, it's because you are using 'ctx' instead of 'canvasContext' variable. 'ctx' variable is not defined, so the code isn't drawing on a valid canvas context.
I remember seeing some tutorials that use "ctx" when I was first learning about canvas & canvas' context. Is it possible you copied the code and forgot to change the variable name?

canvasContext.drawImage(image, 0, 0, 40, 40);
 
Yeah, it's because you are using 'ctx' instead of 'canvasContext' variable. 'ctx' variable is not defined, so the code isn't drawing on a valid canvas context.
I remember seeing some tutorials that use "ctx" when I was first learning about canvas & canvas' context. Is it possible you copied the code and forgot to change the variable name?

canvasContext.drawImage(image, 0, 0, 40, 40);
Good catch! I would have never gotten that. Ghost to the rescue :)
 
Good catch! I would have never gotten that. Ghost to the rescue :)
It's funny because I made the same mistake ages ago. There's a bunch of tutorials on different websites that use "ctx" so it can be very easy to think that it's some sort of global canvas related variable that can't be altered, but NOPE just a normal variable :)
 
It's funny because I made the same mistake ages ago. There's a bunch of tutorials on different websites that use "ctx" so it can be very easy to think that it's some sort of global canvas related variable that can't be altered, but NOPE just a normal variable :)
Why would sites us CTX if it isn't defined?
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom