index.md

---

title: Graphics on the Web
slug: Web/Guide/Graphics

---

{{ListSubpagesForSidebar("/en-US/docs/Web/Guide")}}

Websites and applications often need to present graphics, such as images. Static images can easily be displayed using the {{HTMLElement("img")}} element, or by setting the background of HTML elements using the {{cssxref("background-image")}} property. You can also construct graphics on-the-fly, or manipulate images after the fact. These articles provide insight into how you can accomplish this.

2D Graphics

• Canvas

  • : The {{HTMLElement("canvas")}} element provides APIs to draw 2D graphics using JavaScript.

• SVG

  • : Scalable Vector Graphics (SVG) lets you use lines, curves, and other geometric shapes to render graphics. With vectors, you can create images that scale cleanly to any size.

3D Graphics

• WebGL

  • : A guide to getting started with WebGL, the 3D graphics API for the Web. This technology lets you use standard OpenGL ES in web content.

Video

• Using HTML audio and video

  • : Embedding video and/or audio in a web page and controlling its playback.

• WebRTC

  • : The RTC in WebRTC stands for Real-Time Communications, a technology that enables audio/video streaming and data sharing between browser clients (peers).