How do I upload an image from my PC and draw it onto the canvas?

Question

Basically the title is my question. I have no code to show (I wouldn't know where to start) and all of this needs to be in pure javascript.

Answer 1

Look up the drawImage function (i recommend w3schools).

In your javascript you first need to get the canvas

const canvas = document.getElementById("canvasID");

And theb the context of the canvas

const context = canvas.getContext("2d");

The context is what you want to call the drawImage function on.

context.drawImage(image, xPos, Ypos);

The image that you pass in the drawImage should be loaded this way:

const image = new Image();
image.src = "path/image.jpg";
image.addEventListener('load', () => 
{
    context.drawImage(image, xPos, yPos);
});

The way I would do it is as following:

window.addEventListener('load', () =>
{
    const canvas = document.getElementById("canvasID");
    const ctx = canvas.getContext("2d");
    const image = new Image();
    image.addEventListener('load', () => 
    {
        ctx.drawImage(image, xPos, yPos);
    });
});