Sometimes, we want to draw a line over an image background with HTML5 canvas and JavaScript.

In this article, we’ll look at how to draw a line over an image background with HTML5 canvas and JavaScript.

How to draw a line over an image background with HTML5 canvas and JavaScript?

To draw a line over an image background with HTML5 canvas and JavaScript, we can call some canvas methods.

For instance, we write:

<canvas width='200' height='300'></canvas>

to add a canvas.

Then we write:

const canvas = document.querySelector("canvas")
const context = canvas.getContext("2d")
const image = new Image()
image.onload = () => {
  context.drawImage(image, 100, 20, 500, 500);
  context.beginPath();
  context.moveTo(188, 130);
  context.bezierCurveTo(140, 10, 388, 10, 388, 170);
  context.strokeStyle = "black";
  context.stroke();
}
image.src = 'https://picsum.photos/200/300'

to select the canvas with querySelector.

Then we create an img element with Image.

We set image.onload to a function that draws image onto the canvas with drawImage.

Then we use beginPath to start drawing.

moveTo moves to the location we want to draw.

besizeCurveTo draws a bezier curve. The first 4 arguments are the x and y coordinates of the first 2 control points.

And the last 2 arguments are the x and y coordinates of the end point.

strokeStyle sets the stroke.

And stroke draws the line.

Conclusion

To draw a line over an image background with HTML5 canvas and JavaScript, we can call some canvas methods.