A sprite in most setups is just a normal basic object (position, rotation, etc) that renders as a quad with some sort of texture. In a 2D canvas, if you have your own basic object class, you would want to render your sprite using CanvasRenderingContext2D.drawImage(...). To quote from MDN the parameters are:
void ctx.drawImage(image, dx, dy);
void ctx.drawImage(image, dx, dy, dWidth, dHeight);
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
image
An element to draw into the context. The specification permits any canvas image source (CanvasImageSource), such as an HTMLImageElement, an HTMLVideoElement, an HTMLCanvasElement or an ImageBitmap.
...
The image parameter has quite a few possible classes that you can use as your image source the most used of those being HTMLImageElement
. Here's how it's used.
var img = new Image(); //Creates an HTMLImageElement
img.src = "localhost/myImg.png";
img.addEventListener("load", function() {
ctx.drawImage(img, 0, 0);
});
Note: When loading external images you must deal with cross origin requests. To get it to work, you'll need to CORS enable your image or it will taint your canvas and you won't be able to render it.