MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 424453 of Graphics on the Web

  • Revision slug: Web/Guide/Graphics
  • Revision title: Graphics on the Web
  • Revision id: 424453
  • Created:
  • Creator: jswisher
  • Is current revision? No
  • Comment Revert to revision of 2013-05-17 04:50:02 by ethertank

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.
SVG
Scalable Vector Graphics (SVG) lets you use lines, curves, and other geometric shapes to render graphics. By avoiding the use of bitmaps, you can create images that scale cleanly to any size.

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">Drawing graphics with canvas</a></dt>
      <dd>
        An introductory guide to using the {{HTMLElement("canvas")}} element to draw 2D graphics.</dd>
      <dt>
        <a href="/en-US/docs/SVG">SVG</a></dt>
      <dd>
        Scalable Vector Graphics (SVG) lets you use lines, curves, and other geometric shapes to render graphics. By avoiding the use of bitmaps, you can create images that scale cleanly to any size.</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">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>
  </div>
</div>
Revert to this revision