Resizing offscreen canvas

[denaszune]

This is for your offscreen canvas example. When you try to upload a second image an error occurs because there is an attempt to resize a canvas that has already transferred control to offscreen.

I am also running into this issue with a website i'm developing. The only difference is that my website requires the canvas to be resized after certain events occur.

I would resize a normal canvas with code like this:

this.$.canvas.width = this.size * window.devicePixelRatio;
this.$.canvas.height = this.size * window.devicePixelRatio;
    
this.$.canvas.style.width = this.size + 'px';
this.$.canvas.style.height = this.size + 'px';
this._ctx.scale(window.devicePixelRatio, window.devicePixelRatio);

Ever since I started using offscreen canvas that code would throw the same error as above. I tired instead setting the width and height of the offscreen canvas object. I also set the scale in a web worker because i'm running the animation off the main thread. There is no error when I do this however it does not seem to resize properly.

Main

this._offscreen.width = this.size * window.devicePixelRatio;
this._offscreen.height = this.size * window.devicePixelRatio;
    
this.$.canvas.style.width = this.size + 'px';
this.$.canvas.style.height = this.size + 'px';

Web Worker

self.onmessage = e => {
  if (e.data.devicePixelRatio) {
    ctx.scale(e.data.devicePixelRatio, e.data.devicePixelRatio);
    ctx.commit();
  }
}

I was wondering if anyone knows how to resize an offscreen canvas properly.

[ebidel]

Yea good question. Would you be able to create another canvas and set it up?

[denaszune]

I could probably do that as a last resort. I guess I was hoping I missed something and there is an easier way to resize it without destroying the old one and creating a new one.