• 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.
    • 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
May 3, 2020
2
0
1
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:

Master Yoda

Administrator
Administrator
Verified
Jan 2, 2018
1,720
431
95
Canada
codeforum.org
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 :)
 
  • Like
Reactions: ihannibal

Mathematical

Coder
Mar 30, 2020
144
20
18
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".
 
  • Like
Reactions: ihannibal

Ghost

Active Coder
Apr 19, 2019
407
184
43
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);
 
  • Like
Reactions: Master Yoda

Master Yoda

Administrator
Administrator
Verified
Jan 2, 2018
1,720
431
95
Canada
codeforum.org
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 :)
 
  • Like
Reactions: Ghost

Ghost

Active Coder
Apr 19, 2019
407
184
43
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 :)
 

Master Yoda

Administrator
Administrator
Verified
Jan 2, 2018
1,720
431
95
Canada
codeforum.org
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?