# keeping current image in canvas on redraw
**URL:** https://forum.kirupa.com/t/keeping-current-image-in-canvas-on-redraw/638081
**Category:** web dev
**Created:** [April 15, 2018, 3:17pm UTC](https://forum.kirupa.com/t/keeping-current-image-in-canvas-on-redraw/638081 "2018-04-15T15:17:55Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@ollie-w](https://forum.kirupa.com/u/ollie-w)
#### Post date: [April 15, 2018, 3:17pm UTC](https://forum.kirupa.com/t/keeping-current-image-in-canvas-on-redraw/638081/1 "2018-04-15T15:17:55Z")
I want to apply a filter to a canvas. I am bringing the image in using ajax.
```
fetch('/catpicture')
.then(response => response.blob())
.then(blob => createImageBitmap(blob))
.then((bitmap) => {
ctx.drawImage(bitmap, 0, 0, 200, 200,);
})
```
As I understand it, I can’t just use `ctx.filter = 'blur(10px)'` afterwards. I need to redraw the canvas for the filter to show. How do I keep the image that is in the canvas?
---
### Author:  [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [April 15, 2018, 4:26pm UTC](https://forum.kirupa.com/t/keeping-current-image-in-canvas-on-redraw/638081/2 "2018-04-15T16:26:29Z")
Do you want to filter the whole canvas or just the image? If you want to filter just the image then set the filter before you call drawImage. Setting the filter sets the state of how the canvas draws new things, so setting it before drawImage means when drawImage is called, it will get filtered.
If you want to filter everything, and you haven’t set filter up to this point, then you’ll want to draw your image first, then copy your canvas entirely, set the filter, and redraw the canvas over again from the copy.
---
### Author:  [@ollie-w](https://forum.kirupa.com/u/ollie-w)
#### Post date: [April 15, 2018, 9:41pm UTC](https://forum.kirupa.com/t/keeping-current-image-in-canvas-on-redraw/638081/3 "2018-04-15T21:41:35Z")
I only want to apply the filter to an image, but I want an input to allow a visitor to alter the filter, so it needs to update. When you say “copy your canvas entirely”, how do I do that?
---
### Author:  [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [April 16, 2018, 12:32am UTC](https://forum.kirupa.com/t/keeping-current-image-in-canvas-on-redraw/638081/4 "2018-04-16T00:32:16Z")
Use getImageData and putImageData
> **[CanvasRenderingContext2D.getImageData()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData)**
>
> The CanvasRenderingContext2D.getImageData() method of the Canvas 2D API returns an ImageData object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at (sx, sy) and has an sw width and sh...
---
### Author:  [@ollie-w](https://forum.kirupa.com/u/ollie-w)
#### Post date: [April 16, 2018, 4:00pm UTC](https://forum.kirupa.com/t/keeping-current-image-in-canvas-on-redraw/638081/5 "2018-04-16T16:00:03Z")
I tried
ctx.filter = ‘blur(15px)’;
var imagedata = ctx.getImageData(0,0, 300,300);
ctx.putImageData(imagedata, 0, 0);
but it didn’t work. Where did I go wrong?
---
### Author:  [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [April 16, 2018, 4:43pm UTC](https://forum.kirupa.com/t/keeping-current-image-in-canvas-on-redraw/638081/6 "2018-04-16T16:43:41Z")
You’re missing the whole drawImage part - all the code you posted earlier