How do I use draw image in Javascript
woodyloody (7)

I have been wondering how to add images to a canvas and found the drw image function. I was wondering why it would not work when i have tried using it in my code and i was wondering if someone could help me.

You are viewing a single comment. View All
JustARatherRidi (194)

Your code was right, you just forgot the <script> tag!

Here's a working repl

You'll notice I've added a couple more arguments, those are just to resize the image.

You might have noticed that it is a bit convoluted to work with the canvas API in plain javascript. You know, getting the canvas, then getting a reference to its context, making a separate <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!

heyitsmarcus (290)

@JustARatherRidi I love, love, love the Coding Train, and p5.js is a great library. I've been a patron of Dan for the past couple years.

JustARatherRidi (194)

@heyitsmarcus That's really nice, good on you!