Your code was right, you just forgot the
Here's a working repl
You'll notice I've added a couple more arguments, those are just to resize the image.
<img> element, and all that just to draw an image.
So if you plan to do anything that involves a canvas, I highly recommend p5.js. It's super intuitive and it abstracts away everything wrong with the canvas API, and there's so much you can do with it. There's also the youtube channel called Coding Train. He's got really nice videos on p5.js, and it's frankly quite hard not to get inspired watching some of his videos.
I hope this helped!
script tag in the bottom of your
body with a
src attribute to the
script.js file like this:
<html> <body> <p>Image to use:</p> <img id="scream" width="220" height="277" src="s.jpeg" alt="The Scream"> <p>Canvas:</p> <canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script src="script.js"></script> </body> </html>
And if you always leave the script at the bottom of the page, you don't need to use
window.onload to start your code.
If this solves your problem, please consider upvoting and marking my answer as the accepted answer to close this question. But, I'll continue answering any questions you may have.