Загрузить изображение в качестве фона для холста

Question

Я рисую сетку и загружаю изображение в качестве фона на холсте.

Когда я очищаю полотно, очищаются как изображение, так и сетка.

Я не хочу, чтобы сетка и загруженное изображение фона холста были очищены.

Помогите, пожалуйста, разрешить это?

Answer 1

Холст не различает содержание - все его куча пикселей. Когда вы очищаете холст, вы должны перерисовать все, что хотите. Если у вас есть изображение, сетка просто помещает их в метод, который вы вызываете каждый раз, когда вам нужно обновить холст.

Если ваше изображение покрывает весь холст, вам не нужно использовать метод clearRect(). Просто перерисуйте изображение и сетку. Вы можете обернуть его в методе, например:

function clear() { 
    //ctx.clearRect(0, 0, width, height); /// if image doesn't cover canvas 
    ctx.drawImage(bgImage, 0, 0);   /// draw your image here 
    ... render grid here... 
} 

Затем вызовите clear() вместо ctx.clearRect().

Вы можете альтернативно установить фоновое изображение на холст элемента как и любой другой элемент, используя CSS, но знать о том, что он не будет частью самого холста растрового изображения производят с помощью toDataURL(). Однако, если фон носит лишь временный характер и не означает, как часть какого-либо результата, это может быть хорошим вариантом:

canvas.style.background = 'url(urlToImage.png)'; 

Вы также можете иметь сетку как образ и установить как в качестве фона друг на друга.

canvas.style.backgroundImage = 'url(urlToImage.png), url(urlToGrid.png)';