I tried running the WebGPU Playground sample on Chrome Canary.
However, it seems that the following error is output to the console.

GPUBuffer.setSubData is deprecated: use createBufferMapped (with copyBufferToBuffer if needed) (but note the design/spec of this API is still in flux)

This is probably because the methods of the WebGPU API you're using are outdated.
Also, Firefox Nightly is starting to support WebGPU, but it doesn't seem to support the older methods.

TypeError: verticesBuffer.setSubData is not a function

Like if I give it a image url can it render the image on the screen

The sample doesn't seem to work on Chrome Canary right now due to some breaking changes in WebGPU specs in the last few months.
The following article will be helpful for understanding the main changes.

PSA for Chromium / Dawn WebGPU API updates 2020-10-19
https://hackmd.io/@webgpu/B1UCwfgzv

PSA for Chromium / Dawn WebGPU API updates 2021-04-07
https://hackmd.io/@webgpu/HJdib9rOD

PSA for Chromium / Dawn WebGPU API updates XXXX-XX-XX
https://hackmd.io/@webgpu/BkGB45T8O

I tried to display the following sample with Chrome Canary 111.
https://06wj.github.io/WebGPU-Playground/#/Samples/CubeTexture

However, there seems to be an error in the console.

Tint WGSL reader failure: :20:11 error: 'final' is a reserved keyword
      var final = vec3<f32>(pos.x, pos.y, pos.z);
          ^^^^^