JavaScript by Example

Rendering an image in the canvas

The first step to render something to the canvas is to use the CanvasRenderingContext2D interface to get the 2D rendering context for the target <canvas> element. Inside our createMeme() function, create a context to the canvas element:

let context = this.$canvas.getContext('2d');

The context variable will now hold the object of the CanvasRenderingContext2D interface. To make rendering a little more efficient, we'll add a condition to render only when a user has selected an image. We can do this by checking whether the reference to the image input has any files in it. We should start the rendering process only when there is a file selected in the input. To do so, check whether the input element contains any ...