Shader Atlas
한국어
▣ Media input

Image Texture

이미지 텍스처

Display an image with customizable object-fit modes.

Also known as: ImageTextureimage textureimage layerbitmap texture

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

React
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, ImageTexture } from 'shaders/react'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: 320 }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/photo.jpg" />
    </Shader>
  )
}
Vue
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script setup lang="ts">
import { Shader, ImageTexture } from 'shaders/vue'
</script>

<template>
  <Shader style="width: 100%; height: 320px" :disable-telemetry="true">
    <ImageTexture
      object-fit="cover"
      url="/samples/photo.jpg"/>
  </Shader>
</template>
Svelte
<!-- Renders only in browsers with WebGPU. -->
<!-- /samples/… are this site’s sample files — point them at your own image or video. -->
<script>
  import { Shader, ImageTexture } from 'shaders/svelte'
</script>

<Shader style="width: 100%; height: 320px" disableTelemetry>
  <ImageTexture
    objectFit="cover"
    url="/samples/photo.jpg" />
</Shader>
Solid
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
import { Shader, ImageTexture } from 'shaders/solid'

export default function ShaderEffect() {
  return (
    <Shader style={{ width: '100%', height: '320px' }} disableTelemetry>
      <ImageTexture
        objectFit="cover"
        url="/samples/photo.jpg" />
    </Shader>
  )
}
JavaScript
// Renders only in browsers with WebGPU.
// /samples/… are this site’s sample files — point them at your own image or video.
// expects <canvas id="canvas" style="width:100%;height:320px"></canvas> on the page
import { createShader } from 'shaders/js'

const shader = await createShader(document.getElementById("canvas"), {
  components: [
    {
      type: 'ImageTexture',
      props: {
        objectFit: 'cover',
        url: '/samples/photo.jpg',
      },
    }
  ]
}, { disableTelemetry: true })

Props · ImageTexture

Changes apply to the demo above and to the code tabs. Descriptions come from the library registry (MIT).

NameValueDefaultRange / optionsDescription
urlImageSet in codehttps://shaders.com/sample.jpg—Upload an image or provide a URL
objectFitObject Fitfillcover · contain · fill · scale-downHow the image should be sized within the viewport

Every component also takes blendMode · opacity · visible · maskSource/maskType · boundingBox · id

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Video Texture비디오 텍스처

Display a video with customizable playback and object-fit modes.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Webcam Texture웹캠 텍스처

Display a live webcam feed with customizable object-fit modes.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

Text텍스트

Text with any Google font — multi-line with wrapping, alignment and line height — rendered crisp via a glyph texture.

Moves in browsers that support WebGPU

This device could not render the demo — showing a still

HTML In Canvas캔버스 속 HTML

Render live HTML/DOM content as a WebGPU texture layer via the html-in-canvas API. Requires Chrome Canary with chrome://flags/#canvas-draw-element enabled.

Think of a photo placed in a frame: the image fills the canvas and can become the base for later blur, color, or distortion layers.

Choose the picture with `url` and how it fits with `objectFit`. The default `fill` fills the frame; `cover` preserves the ratio and crops the edges, while `contain` keeps the whole image visible. `scale-down` avoids enlarging the source.

This generator draws the image itself, so place it before any effect that should change it. When the source and canvas have different proportions, `fill` can stretch the picture; choose `cover` or `contain` when preserving its proportions matters.

When to use

Use it for photo-led hero or card backgrounds, images that need shader effects, and artwork that must fit a fixed canvas. Avoid it for small icons or lettering that needs crisp vector edges.

Open as page ↗