CODEWITHSUNDEEP
javascripthtmlcanvas
arthur.sw
arthur.sw

Reputation: 11619

How to replaceByImage() instead of drawImage() on html canvas (ignore opacity)?

I would like to draw an image (which can have transparent parts) on the canvas, totally replacing the canvas content by the sourve image (unlike in a source-over composition operation).

The resulting canvas would have the exact same values as the source image. I can't find any composition operation to perform this.

I can always clear the canvas before calling drawImage() but I was wondering if there is a faster/better way.

Upvotes: 0

Views: 120

Answers (1)

user1693593
user1693593

Reputation:

You can use the copy mode if you want to replace everything (as it seem from the text in the question):

ctx.globalCompositeOperation = "copy";

If you only want to remove parts of the canvas, ie. area where you content will be drawn to, then clearRect can be used:

ctx.clearRect(x, y, width, height);   // replace with values

Upvotes: 1

Related Questions