How do I draw an HTML element on a canvas?

Question

I want to create a pixel art app, and so far so good. You're able to draw on the pixel grid. What I'm trying to figure out is, how to render the art onto an html canvas. I know there's drawImage(), but I want to render an HTML5 element, not an image. Any suggestions?

Answer 1

There is still not anything officially in the API to do this. It's been discussed a few times, but this would come with a lot of security issues to tackles and ... yeah, don't hold your breath to see this coming.

For the time being, the only way to render an HTML element is to produce a copy of the DOM, insert it in an SVG <foreigObject>, produce a standalone file of this SVG image and draw it over the canvas through drawImage(). Though this will not render exactly what you see in HTML (because of the security issues I talked about), and it's slow and complicated.

So instead, I invite you to search about the 2D context API directly and jump right into the joy of drawing yourself the grid. All it could take ultimately is a few ctx.fillStyle = color, ctx.fillRect(x, y, size, size) and a for loop. But I'm sure you'll be able to find tutorials online that will guide you through this.
(When you're ready and if you want to make it super performant then you can even consider painting the grid on an ImageData at pixel level and scale the result on your canvas, for this there are a few answers on StackOverflow that will show you how to do this, but start with the basics).