Graphics on the Web

  • Revision slug: Web/Guide/Graphics
  • Revision title: Graphics on the Web
  • Revision id: 396403
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment

Revision Content

Modern Web sites and applications often need to present graphics. While simply displaying static images can easily be done using the {{HTMLElement("img")}} element, or by setting the background of HTML elements using the {{cssxref("background-image")}} property, you often want to construct graphics on-the-fly, or manipulate images after the fact. These articles provide insight into how you can accomplish this.

2D graphics

Drawing graphics with canvas
An introductory guide to using the {{HTMLElement("canvas")}} element to draw 2D graphics.

View All...

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.

 

Revision Source

<p><span class="seoSummary">Modern Web sites and applications often need to present graphics.</span> While simply displaying static images can easily be done using the {{HTMLElement("img")}} element, or by setting the background of HTML elements using the {{cssxref("background-image")}} property, you often want to construct graphics on-the-fly, or manipulate images after the fact. <span class="seoSummary">These articles provide insight into how you can accomplish this.</span></p>
<div class="row topicpage-table">
  <div class="section">
    <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">2D graphics</h2>
    <dl>
      <dt>
        <a href="/en-US/docs/Web/Guide/Graphics/Drawing_graphics_with_canvas" title="/en-US/docs/Web/Reference">Drawing graphics with canvas</a></dt>
      <dd>
        An introductory guide to using the {{HTMLElement("canvas")}} element to draw 2D graphics.</dd>
    </dl>
    <p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">View All...</a></span></p>
  </div>
  <div class="section">
    <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">3D graphics</h2>
    <dl>
      <dt>
        <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/WebGL">WebGL</a></dt>
      <dd>
        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.</dd>
    </dl>
    <dl>
    </dl>
  </div>
</div>
<p>&nbsp;</p>
Revert to this revision