How to make motion blur effect on html canvas (in real time)?

Question

JavaScript

I have a simple game layout (the ship flies across the cell field)
Controls:
W / up arrow - acceleration
Mouse - direction of the ship
(Just in case, click on the field to control, it can jam)


I want to make it so that at high speed of the ship, the mesh is blurred as if it were moving.

At first, I just wanted to partially clear the canvas (fill with a partially closed rectangle), like this:


However, it looks good only when the boat flies at low speed. On a large field, it simply turns into a fine grid, which is also ugly. And it's not a blur effect. This is just a duplication of the image with a slight offset, but not a motion blur effect.

Then I decided to use the canvas API to apply the blur filter

This already looks better (especially in combination with incomplete canvas clearing), but this method is too heavy and hurts performance.

I started looking for libraries that can do this effect, but in an easier way. Found this


However, firstly, outwardly it looks somehow not very good. Secondly, it also slows down the gameplay too much (obviously it's not 60FPS)

Maybe there is some way to achieve the motion blur effect, but with good performance? Are there any libraries? Or is it impossible to do it on canvas?

Answer 1

Slightly tweaked the grid drawing function (left one beginPath and one stroke) and at least my fps increased from 30 to the maximum possible for requestAnimationFrame 60 fps. All this on the native blur filter